3d transform (3D變形)（rotate skew scale translate）
基礎知識
perspective (視距,景深) perspective-origin (視點)
transfrom
(1) 坐標 x y z
(2) 變形 基點位置 transform-origin
(3)transfrom-style：preserve-3d
3d transform (3D變形)（rotate skew scale translate）
基礎知識
perspective (視距,景深) perspective-origin (視點)
transfrom
(1) 坐標 x y z
(2) 變形 基點位置 transform-origin
(3)transfrom-style：preserve-3d
它就用到了一個比較簡單的坐標y 軸旋轉那咱們看一下他的代碼
首先要建九個盒子放九張圖片，這個很容易理解的。
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就到這里，很簡單的;
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找到軸心位置）
【 微信掃一掃 】
