柚子快報邀請碼778899分享：CSS3之3D轉(zhuǎn)換

http://yzkb.51969.com/

文章目錄

一、3D移動translate3d二、perspective（透視）三、translateZ四、rotateX-rotateY-rotateZ五、rotate3d(x,y,z,deg)六、3D呈現(xiàn)transfrom-style七、旋轉(zhuǎn)木馬案例

一、3D移動translate3d

3D移動在2D移動的基礎(chǔ)上多加了一個可以移動的方向，就是z軸方向

- transform:translateX(100px) ===> 僅僅在x軸上移動

- transform:translateY(100px) ===> 僅僅在y軸上移動

- transform:translateZ(100px) ===> 僅僅在z軸上移動

- transform:translate3d(x,y,z) ===> x,y,z代表要移動的方向

二、perspective（透視）

寫到被觀察盒子的父盒子上模擬人眼觀察目標物體的距離

body{

perspective: 1000px;

}

div{

width: 200px;

height: 200px;

background-color: blueviolet;

margin: 0% auto;

transform: translate3d(100px,100px,100px);

}

三、translateZ

Z軸值越大，目標物體就越大

四、rotateX-rotateY-rotateZ

沿著X，Y，Z軸旋轉(zhuǎn)

五、rotate3d(x,y,z,deg)

沿著自定義軸旋轉(zhuǎn)deg為角度

六、3D呈現(xiàn)transfrom-style

- 控制子元素是否開啟三維立體環(huán)境

- transform-style:flat子元素不開啟3d立體空間默認的

- transform-style:perserce-3d;子元素開啟立體空間

- 代碼寫給父級，但是影響的是子盒子

七、旋轉(zhuǎn)木馬案例

柚子快報邀請碼778899分享：CSS3之3D轉(zhuǎn)換

http://yzkb.51969.com/

好文閱讀