CSS之2D 3D轉換總結

translate語法

/* x 就是 x 軸上水平移動 */

/* y 就是 y 軸上水平移動 */
transform
:translate
(x, y)
transform
:translatex
(n)transfrom
:translatey
(n)

div

2d旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

rotate語法

/* 單位是：deg */

transform
:rotate
(度數)

img:hover

transform-origin基礎語法

transform-origin

: x y;

語法

transform

:scale
(x, y)

div:hover

**演示

div:hover

三維座標系

一.3d移動 translate3d

語法

transform

:translate3d
(x, y, z)

transform

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

**演示

body

translatez與perspecitve的區別

perspecitve給父級進行設定，translatez給 子元素進行設定

三、3d旋轉rotatex

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

**案例

div

imgimg:hover

四、3d旋轉rotatey

**演示

div

imgimg:hover

​

**演示

div

imgimg:hover

**演示

div

imgimg:hover

css動畫2D 3D的轉換

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

css旋轉45度 CSS動畫 2D 3D轉換

css動畫 2d 3d轉換 2d 轉換 1 translate 方法 通過 translate 方法，元素從其當前位置移動，根據給定的 left x 座標 和 top y 座標 位置引數 例項 divtransform translate 50px,100px 值 translate 50px,10...

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

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