css学习4

impress 2019-12-13

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θ就可以达到我们想要的效果

相关推荐