WEB前端培训:CSS3 3D 转换

日期：2020-12-04 10:30作者：北大青鸟西安华清校区

摘要:3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。在本章中，您将学到其中的一些 3D 转换方法： rotateX() rotateY() 点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处： 2D rot
关键词：北大青鸟web前端

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：

2D rotate

3D rotate

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

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

属性
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

			div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ }

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

			div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }

转载请保留本文网址https://www.sxbdqn.cn/qqwd/webqd/262.html
上一篇：WEB前端培训：CSS3 2D 转换
下一篇：WEB前端培训:HTML常用标签及其属性