CSS3新增樣式2D 3D效果 立方體旋轉

transform：rotate(30deg)

;//旋轉角度
transform:translate(100px,200px)
;//順著x、y軸平移的畫素
transform:translatex(100px)
;//順著x軸平移的畫素
transform:translatey(100px)
;//順著y軸平移的畫素
數值可正可負

transform：scale（2,1.5）;//水平方向縮放2倍、豎直方向縮放1.5倍

transform:scalex(2)
;//水平方向縮放2倍
transform:scaley(1.5)
;//豎直方向縮放1.5倍

transform：skew（30deg，10deg）;//水平方向扭曲30度，豎直方向扭曲10度

transform:skewx(30deg)
;//水平方向扭曲30度
transform:skewy(30deg)
;//豎直方向扭曲30度

transform-origin：x-axis y-axis;

//其中x、y可以是百分值、px、em，x也可以是字元引數left、center、right；
//y也可以是top、center、bottom
transform-origin：left top
;沿著原點向左上旋轉

transform

rotatex(
)//沿x軸旋轉
rotatey(
)//沿y軸旋轉
rotatez(
)//沿z軸旋轉
透視(perspective)
translatex(x)//沿x軸平移
translatey(y)//沿y軸平移
translatez(z)//沿z軸平移
translate3d(x,y,z)//沿x、y、z三個方向平移

transform-style: preserve-3d;//設定3d模式

perspective: 800px;//設定視距，呈現立體感

.box ul li:nth-child(1)

.box ul li:nth-child(2)
.box ul li:nth-child(3)
.box ul li:nth-child(4)
.box ul li:nth-child(5)
.box ul li:nth-child(6)

.box ul:hover

css3中2D 3D屬性詳解

首先要清楚一點，在css中的x軸正方向從左至右，但是y軸的正方向是從上至下。位移 改變元素的位置 transform translate x,y 定義2d轉換，沿著x軸和y軸移動，實際上本質和定位當中的left right top bottom一樣。例如 box 逆時針按中心點旋轉45度 1.設定的...

css3新特性 過渡 動畫 2d 3d轉換

過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...

css動畫2D 3D的轉換

可以使用2d,3d來轉換元素 translate 使元素移動 有兩個引數，x和y，x表示水平方向的移動，y表示垂直方向的移動 例如 transfrom translate 100px,100px 例子 transfrom rotate 180deg deg 是乙個度數單位必須寫的 例子 transf...