CSS3转换
transform属性,让一个元素在坐标系统中变形,这个属性会包含一系列的变形函数,可以移动,旋转和缩放元素;
兼容性:ie10+ 、 firefox16、 chrome36 、 safari9 、opera12.1;
2D转换
旋转rotate
- 通过指定的角度对原元素指定一个2D的旋转;
- 语法:transform:rotate(< angle>);
- 参数说明:
- angle指定角度;
- 正数表示顺时针旋转;
- 负数表示逆时针旋转;
移动translate
- translateX(x) – 仅仅水平方向移动(X轴移动)
参数值说明:
数值可以改变大小;
left right无效果;
%可以用;
em单位可以用; - translateY(y) – 仅仅垂直方向移动(Y轴移动)
参数值说明:- 数值可以改变大小;
- left right无效果;
- %可以用;
- em单位可以用;
- translate(x,y) – 水平方向和垂直方向同时移动(X轴移动和Y轴移动)
参数值说明:- X轴的值必须填写的;
- Y轴值可填可不填,如果不填写默认是0;
缩放scale
-
scaleX()元素水平方向缩放
使用[sx,1]缩放矢量执行缩放操作的,sx为所需参数; -
语法:transfrom: scaleX(< number>);
-
参数说明:
- .5表示 0.5 代表以中心为原点进行百分之50的缩小;
- 设置比1大的值,表示放大;
- 设置为0图片显示无;
-
scaleY()元素垂直方向缩放
使用[1,sy]缩放矢量执行缩放操作的,sy为所需参数 -
语法:transfrom: scaleY(< number>);
-
参数说明:
-
.5表示 0.5 代表以中心为原点进行百分之50的缩小;
-
设置比1大的值,表示放大;
-
设置为0图片显示无;
-
-
scale(x,y)元素水平方向和垂直方向同时缩放
使用[sx,sy]缩放矢量的两个参数指定一个2D缩放; -
语法:transfrom: scale([< number>]);
-
参数说明:
-
.5表示 0.5 代表以中心为原点进行百分之50的缩小;
-
设置比1大的值,表示放大;
-
设置为0图片显示无;
-
两个参数说明x和y都进行比例缩放,一个参数说明x和y同时进行等比例缩放;
-
扭曲skew
-
skewX(x)元素在水平方向扭曲变形
按给定的角度沿着X轴指定一个斜切变换; -
语法:transform: skewX(角度);
-
参数说明:
- 正值:逆时针;
- 负值:顺时针;
- -90deg到90deg是正确的取值范围;
-
skewY(y)元素在垂直方向扭曲变形
按给定的角度沿着Y轴指定一个斜切变换; -
语法:transform: skewY(角度);
-
参数说明:
- 正值:顺时针;
- 负值:逆时针;
- -90deg到90deg是正确的取值范围;
-
skew(x,y)元素在水平方向和垂直方向扭曲变形
按给定的角度沿着Y轴和X轴指定一个斜切变换; -
语法:transform: skew(角度,[角度]);
3D转换
旋转rotate X()
-
指定对象在X轴方向的旋转角度;
-
语法;transform: rotateX(angle);
旋转rotate Y()
-
指定对象在Y轴方向的旋转角度;
-
语法;transform: rotateY(angle);
旋转rotate Z()
-
指定对象在Z轴方向的旋转角度;
-
语法;transform: rotateZ(angle);
旋转rotate 3d()
- 指定对象的3D旋转角度;
- 语法;transform: rotate(x,y,z,angle);
- 前三个参数分别表示旋转方向x,y,z,第四个参数表示旋转的角度,参数不允许省略;
- 建议取值的范围:
- x:0-10;
- y:0-10;
- z;0-10;
- angle:-360deg-360deg;
移动translateZ
- 指定对象的Z轴的平移;
- 语法:transform:translateZ();
- 参数对应Z轴,不允许省略;
发现改变值没有变化,注意设置5px表示向屏幕来了5个像素,负值类似;
移动translate3d
- 指定对象的3D位移;
- 语法:transform:translate3d(x,y,z);
- 参数对应各个轴,参数不允许省略;<