css 3d 基礎知識

css3d 總結

3d transform (3D變形)（rotate skew scale translate）

基礎知識

perspective (視距,景深) perspective-origin 視點)
perspective (視距,景深) perspective-origin (視點)

)

(變形基點位置transform-origin

(3)transfrom-style：preserve-3d

3D旋轉圖片相簿

3d transform (3D變形)（rotate skew scale translate）3d transform (3D變形)（rotate skew scale translate）
景深) perspective-origin (視點)

transfrom

(1) 座標x y z

(2) 變形基點位置transform-origin

(3)transfrom-style：preserve-3d

卷就用到了一個比較簡單的座標y 軸旋轉那咱們看一下他的程式碼

html的程式碼：

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

首先要建造九個盒子放九張圖片，這個很容易理解的。

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);
      }

css就到這裡，很簡單的;

js的程式碼

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


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

（kj）就是3d空間，點擊kjjrejs的程式碼

rrreee

（kj）就是3d空間，點擊kjjjs ；

3d空間樣式rotateY（這就是上下軸旋轉）translateZ（Z這就是3d立體字軸；讓3d空間後移275px找到軸心位置）

更多css 3d  基礎知識 相關文章請關注PHP中文網！