CSS3 transform

transform

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

 

• translate(x,y) 定义 2D 转换

三种情况：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translateX(x)仅水平方向移动（X轴移动）；
translateY(Y)仅垂直方向移动（Y轴移动），

具体使用方法如下
transform:translate(100px,20px);
transform:translateX(100px);
transform:translateY(100px);

 

• translate3d(x,y,z) 定义 3D 转换

　　　　同上类似

 

• scale() 定义 2D 缩放转换

缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

三种情况：
scale(x,y) 也就是X轴和Y轴同时缩放
scaleX(x) 元素仅水平方向缩放（X轴缩放）
scaleY(y ) 元素仅垂直方向缩放（Y轴缩放）

使用方法：
transform:scale(2,1.5)
transform:scaleX(2)
transform:scaleY(2)

 

• scale3d(x,y,z) 定义 3D 缩放转换

　　　　同上类似

 

• rotate(angle) 定义 2D 旋转，在参数中规定角度

　　　　transform:rotate(30deg) 

　　　　正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

 

• skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

三种情况：
skew(x,y) X轴和Y轴同时按一定的角度值进行扭曲变形
skewX(x) 仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y) 仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

具体使用如下：（备注我们也可以通过transform-origin来改变元素的基点位置）

transform:skew(30deg,10deg):
transform:skewX(30deg)
transform:skewY(30deg)

 

• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵

　　　　matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：

　　　　以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。

　　　　就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵 （太复杂，不知道原理）

 

• transform-origin

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。
默认点是元素的中心点。
其中X和Y的值可以是百分值,em,px，
其中X也可以是字符参数值left,center,right
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%

 

• rotate3d(x,y,z,angle) 定义 3D 旋转
• rotateX(angle) 定义沿着 X 轴的 3D 旋转 测试
• rotateY(angle) 定义沿着 Y 轴的 3D 旋转
• rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
• perspective(n) 为 3D 转换元素定义透视视图