HTML5复习 (11)

CSS3转换

一、rotate  旋转

transform:rotate(angle);

transform:rotate(8deg);

angle 正数表示顺时针，负数表示逆时针。

二、translate 移动

transform:translateX(); //竖直方向移动

transform:translateY(); //水平移动

transform:translate(x,y) //x,y同时移动，省略第二个参数，默认第二个为0.

数值要带单位

三、scale 缩放

transform:scaleX(); //水平方向缩放，坐标原点在中间，往中间缩小。

transform:scaleY(); //竖直方向缩放，坐标原点在中间，往中间缩小。

transform:scale(x,y); //水平竖直同时缩放，省略第二个参数，默认两个参数相等。

数值不带单位

四、skew 斜切扭曲

transform:skewX(); //X方向斜切扭曲

transform:skewY(); //Y方向斜切扭曲

transform:skew(x,y); // X,Y方向同时X方向斜切扭曲

数值单位deg  正值是逆时针，负值是顺时针

五、matrix 矩阵

transform:matrix(a,b,c,d,tx,ty);

tx,ty就是基于X和Y坐标重新定位元素

后面会详细做笔记