通过transform属性可以实现元素的旋转、缩放、倾斜、移动四种类型的转换。
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。接下来在文章中将为大家具体介绍如何使用transform属性
【推荐课程：css3教程】
旋转 rotate
用法：
transform: rotate(45deg);
一个参数角度，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度
div{width:200px;height: 200px;background-color: pink;transform: rotate(55deg);}
效果图：
缩放 scale
用法：
transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
div{width:200px;height: 200px;background-color: pink;transform: scale(0.5,1.2)}
效果图：
倾斜 skew
用法：
transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
div{width:200px;height: 200px;background-color: pink;transform: skew(30deg, 30deg)}
效果图：
移动 translate
用法：
transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离，单位px，
一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离
div{width:200px;height: 200px;background-color: pink;transform:translate(45px, 150px);}
效果图：
以上就是如何使用transform属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614046.html
微信扫一扫 
支付宝扫一扫 
