平移：translate(x軸的平移距離，y軸的平移距離)
示例
:transform
:translate
(20px,20px)
;
rotate(旋轉的角度)
示例：
transform
:rotate
(45deg)
; //繞x,y,z軸進行旋轉
transform
:rotatex
(10deg)
; //繞x軸進行旋轉
transform
:rotatey
(10deg)
; //繞y軸進行旋轉
transform
:rotatez
(10deg)
; //繞z軸進行旋轉
scale(x軸縮放的大小，y軸縮放的大小)示例：
transform
:scale
(0.5,0.5)
; //縮放0.5倍
skew(x軸傾斜的角度，y軸傾斜的角度)示例：
transform
:skew
(10deg,10deg)
;
例項
transform-origin
: 50% 100%;
transform-origin
: left top;
transform-origin
: 200px 100px;
平移：translate(x軸的平移距離，y軸的平移距離,z軸的平移距離)
示例
transform
:translate
(x,y)
;transform
:translatey
(y);
transform
:translate3d
(x,y,z)
;/*3d位移*/
rotate用法見上面 CSS3的變形 過渡 動畫 關聯屬性
transform 可以對元素物件進行旋轉rotate 縮放scale 移動translate 傾斜skew 矩陣變形matrix。示例 transform rotate 90deg scale 1.5,0.8 translate 100px,50px skew 45deg,45deg 矩陣變形 m...
CSS3中的變形與動畫
css3常見的動畫效果的實現，其實主要是靠transition和animation。而通常，這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時，給他乙個過...
Css3中的變形與動畫
下面的 列出了所有的轉換屬性 屬性描述 csstransform 向元素應用 2d 或 3d 轉換。3transform origin 允許你改變被轉換元素的位置。32d transform 方法 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y ...