码迷,mamicode.com
首页 > Web开发 > 详细

css学习4

时间:2019-12-13 16:40:30      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:ola   高度   margin   增加   需要   space   mon   逆时针   font   

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

css学习4

标签:ola   高度   margin   增加   需要   space   mon   逆时针   font   

原文地址:https://www.cnblogs.com/ygz0111/p/12035918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!