css学习4

css3 2d,3d转换

1.2d转换

transform rotate

div{transform:rotate(30deg);} 顺时针旋转30度，负值为逆时针

transform  translate

div{transform:translate(50px,100px)} 从当前位置移动到xy，x为左，y为上

transform scale

{transform:scale(2,3);} 增加宽度和高度，分别2倍，3倍

transform skew

{transform:skew(30deg,20deg);} 在x轴和y轴分别倾斜度数，元素在X轴和Y轴上倾斜20度30度，注意，前面是y轴。

transform matrix(a,b,c,d,e,f)

{transform:matrix(0.866,0.5,-0.5,0.866,0,0);} 6个参数，分别是旋转，缩放，移动和倾斜。利用matrix()方法旋转div元素30°

平移只有跟e和f有关系，跟其他a,b,c,d没有关系，它们该怎么样还是怎么样，e对应x轴的平移，f对应y轴的平移，往正方向平移多少单位就加上多少单位，反之则减去多少个单位。

缩放只有跟a和d有关系，跟其他数值都无关，a对应x轴缩放，d对应y轴缩放，缩放多少倍就乘以多少

transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);然后需要旋转多少度就计算出这个度数的cosθ，sinθ就可以达到我们想要的效果