css3新手2D转换

CSS3 2D 转换

1,了解2D变换方法:

·       translate()

·       rotate()

·       scale()

·       skew()

·       matrix()

 

2D 转换方法

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

translate(x,y)           定义 2D 转换,沿着 X Y 轴移动元素。

translateX(n)           定义 2D 转换,沿着 X 轴移动元素。

translateY(n)          定义 2D 转换,沿着 Y 轴移动元素。

scale(x,y)               定义 2D 缩放转换,改变元素的宽度和高度。

scaleX(n)              定义 2D 缩放转换,改变元素的宽度。

scaleY(n)              定义 2D 缩放转换,改变元素的高度。

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

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

skewX(angle)          定义 2D 倾斜转换,沿着 X 轴。

skewY(angle)          定义 2D 倾斜转换,沿着 Y 轴。

 

1rotate

例:

 

1translate()方法,根据左(X)和顶部(Y)位置给定的参数,从当前元素位置移动。

例:transform:translate(50px,100px);

解释:translate值(50px100px)是从左边元素移动50个像素,并从顶部移动100像素。

 

2rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

例:transform:rotate(45deg);

解释:rotate值(45deg)元素顺时针旋转45度。

 

3scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

例:transform: scale(2,4);

解释:scale2,4)转变宽度为原来的大小的2倍,和其原始大小4倍的高度。

 

4skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:

例:transform: skew(30deg,20deg);

解释: skew(30deg,20deg) 元素在X轴和Y轴上倾斜2030度。

5, matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

例:transform:matrix(0.866,0.5,-0.5,0.866,0,0);

解释:matrix()方法旋转div元素30°

阅读更多
换一批

没有更多推荐了,返回首页