CSS3新特性 3D轉換技術

3d的特點

三維座標系

3d轉換知識要點

3d移動translate3d

語法

transform

:translate3d
(x, y, z)

transform

:translate3d
(100px, 100px, 100px)
/* 注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充 */
transform
:translate3d
(100px, 100px, 0)

知識要點

**演示

body

3d 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉

**案例

div

imgimg:hover

**演示

div

imgimg:hover

**演示

div

imgimg:hover

**演示

div

imgimg:hover

4 CSS新特性之3D轉換

3d轉換中最常用的是3d位移和3d旋轉。主要知識點如下 div修改成以下形式就沒有問題 transform translatex 100px translatey 100px 或者 transform translate3d 100px,100px,0 同時translatez 100px 需要借助...

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

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

CSS3的2D轉換和3D轉換

rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...