CSS3 2D转换

转换：就是使用transform属性将html元素

2D转换：在二维空间内转换     x,y

3D转换：在三维空间内转换  x,y,z

 

　　移动 translate：将元素在x轴或y轴上进行移动

　　　　实例：transform：translate（20px，30px）； x轴上像右移动20px，在y轴上像下移动30px；

　　　　translate(x,y)；

　　　　　　x轴上移动距离，可以是长度，也可以是百分比

　　　　　　y轴上移动距离，可以是长度或百分比 ，可选 默认值为0

　　　　你也可以使用tanslateX和translateY函数分别设置X轴和Y轴的值。

　　旋转 rotate：可以根据指定的角度旋转元素

　　　　实例：transform：rotate（45deg）；　　顺时针旋转45度角，如果是负数，表示逆时针旋转

　　缩放 scale：可以叫元素放大或缩小

　　　　实例transform:scale(1.2);　　　　长宽放大到1.2倍，如果是0.2  就是缩小0.2倍

　　　　scale（x，y）；

　　　　　　X:x轴上的缩放倍数；

　　　　　　Y：y轴上缩放倍数；可选 默认值 同第一个参数一样

　　你也可以使用scaleX和scaleY函数分别设置x轴和y轴的值

　　倾斜 skew：可以将元素倾斜显示

　　　　实例：transform：skew（45deg，-20deg）；           将元素x轴倾斜45度角，Y轴倾斜-20度角可选 默认是0

　　　　skew（x，y）；　　    

　　　　　　X:x轴上倾斜的角度

　　　　　　Y：y轴上倾斜的角度

　　同样你可以使用skewX和skewY函数分别设置x轴和y轴的值

 

 

使用多个函数

　　transfrom属性中可以写多个转换函数

　　　　transform：scale（1.2） rotate（45deg）；

 

transform-origin（转换基准点）

　　CSS中默认的转换基准点是元素中心点

　　使用trnaform-origin属性，可以更改元素转换的基准点

实例：

　　transform：rotate（45deg）；

　　trnasform-origin:left top;     设置基准点为左上角

 

trnasform-origin：x，y，z；

　　X:默认值50%   基准点在x轴上的位置   （left center right 长度 百分比）

　　Y:默认值50%  基准点在y轴上的位置   （top center  bottom  长度 百分比）

　　z:默认是0   基准点在z轴上的位置   （长度）