css 3d 基礎知識

css3d 總結

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

基礎知識

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

(1) 座標 x y z

(2) 變形 基點位置 transform-origin
(3)transfrom-style：preserve-3d

3D旋轉圖片相簿

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

基礎知識

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

(1) 座標 x y z

(2) 變形 基點位置 transform-origin
(3)transfrom-style：preserve-3d

3D旋轉圖片相簿

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

html的代碼：

  <p class="kj" id="kj">    <p class="mian"><img src="img/p1.jpg" alt=""></p>    <p class="mian"><img src="img/p2.jpg" alt=""></p>    <p class="mian"><img src="img/p3.jpg" alt=""></p>    <p class="mian"><img src="img/p4.jpg" alt=""></p>    <p class="mian"><img src="img/p5.jpg" alt=""></p>    <p class="mian"><img src="img/p6.jpg" alt=""></p>    <p class="mian"><img src="img/p7.jpg" alt=""></p>    <p class="mian"><img src="img/p8.jpg" alt=""></p>    <p class="mian"><img src="img/p9.jpg" alt=""></p>  </p>

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

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空間，點擊kj要是一種效果，就要有一種方法或步驟；
3d空間樣式rotateY（這就是上下軸旋轉）translateZ（Z這就是3d立體字軸；讓3d空間後移275px找到軸心位置）