les bases du CSS 3D

Résumé CSS3D

Transformation 3D (traduction de l'échelle d'inclinaison de rotation)

Connaissances de base

perspective (distance de visualisation, profondeur de champ) perspective-origine (point de vue)
transfrom

(1) Coordonnées x y z

(2) Transformation position du point de base transform-origin
(3)transfrom-style : préserver-3d

Rotation 3D album d'images

Transformation 3D (rotation de l'échelle d'inclinaison, traduction)

Connaissances de base

perspective (distance de visualisation, profondeur de champ) perspective- origine (point de vue )
transfrom

(1) Coordonnées x y z

(2) Transformation position du point de base transform-origin
(3)transfrom-style : préservation-3d

Album d'images rotatif 3D

Il utilise une rotation de coordonnées relativement simple sur l'axe y. Jetons un coup d'œil à son code

code html :

  ccb2c6a6f93063c799f538e241ce8db3
    ada5762ba3aad440306517031eafe2cdbdf9b2b2e19c19e57d32960dac6847b994b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd1465560c85bcc6967c2cdcd6b6e1008d94b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd7a6e6b15c37d265bae9ef31a9fa7ffcd94b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd616e683508e9c8ba7e1da472c387c08394b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd902b15278c63978c56dd23b3e9f48d1b94b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd0c846a940324401da88eb647ae7cd2ee94b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cdc2caf7a3ee46e9b7a93dc2506d56ed0994b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cd7e7741a17cc1179a700e3266f35ea38d94b3e26ee717c64999d7867364b1b4a3
    ada5762ba3aad440306517031eafe2cda3998f0e30210d777f32d3d45a12044394b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a3

.

Tout d’abord, vous devez construire neuf boîtes pour contenir neuf images. C’est facile à comprendre.

code css

          body{
            background: #6daf39;（背景加了个颜色 主要是好看）
          }
          .xj{
          perspective:600px;（这是井深）
          }
          .kj{
          transition: 1s;（运动时间）
          transform-style:preserve-3d;（实现3d效果 当然这是非常重的）
          width:200px;
          height: 300px;
          margin:80px auto;
          position: relative;
          transform: rotateY(0deg) rotateX(0deg) translateZ(-275px);
          transform-origin: center center -275px;
          }

      .mian{
        position:absolute;
        font-size: 50px;
        color:#fff;
        text-align: center;
        line-height: 300px;
      }
      .mian:nth-child(1){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(0deg)translateZ(275px);
      }
      .mian:nth-child(2){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(40deg)translateZ(275px);
      }
      .mian:nth-child(3){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(80deg)translateZ(275px);
      }
      .mian:nth-child(4){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(120deg)translateZ(275px);
      }
      .mian:nth-child(5){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(160deg)translateZ(275px);
      }
      .mian:nth-child(6){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(200deg)translateZ(275px);
      }
      .mian:nth-child(7){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(240deg)translateZ(275px);
      }
      .mian:nth-child(8){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(280deg)translateZ(275px);
      }
      .mian:nth-child(9){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(320deg)translateZ(275px);
      }

Le css est là, très simple;

code js

    kj.onclick=function () {
      cishu++;
      var jiaodu=40*cishu;


      kj.style.transform="rotateY("+jiaodu+"deg)translateZ(-275px)"
    }

(kj) est l'espace 3D. Si cliquer sur kj est un effet, il doit y avoir une méthode ou une étape
Style d'espace 3D rotateY (c'est la rotation des axes haut et bas) translationZ (Z est la 3D). axe Word stéréoscopique ; reculez l'espace 3D de 275 px pour trouver la position de l'axe)

Pour plus d'articles sur les connaissances de base en CSS 3D, veuillez faire attention au site Web PHP chinois !