CSS3 2D 转换【旋转transform:rotate（30deg）; 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

最新推荐文章于 2022-10-06 22:03:07 发布

四哥-云上

最新推荐文章于 2022-10-06 22:03:07 发布

阅读量2.3k

点赞数

分类专栏： css3 文章标签： css3 2d

本文链接：https://blog.csdn.net/yongbin668/article/details/51980182

版权

本文详细介绍了CSS3中的2D转换，包括translate方法的移动效果，rotate方法的旋转效果，scale方法的放大缩小功能，skew方法的倾斜变换以及matrix方法的综合应用。内容涵盖各方法的实例演示和浏览器支持情况。

摘要由CSDN通过智能技术生成

CSS3 2D 转换

CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

变换的效果，让某个元素改变形状，大小和位置。

您可以转换您使用2D或3D元素。

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

在本章您将了解2D变换方法：

关注

专栏目录