CSS3D转换——transform属性的rotatex（）⽅法和
rotatey（）⽅法
⽬录
CSS 3D转换
允许我们使⽤ 3D 转换来对元素进⾏格式化。
浏览器⽀持
表格中的数字表⽰⽀持该属性的第⼀个浏览器版本号。
紧跟在 --, -ms- 或 -moz- 前的数字为⽀持该前缀属性的第⼀个浏览器版本号。
属性Chrome IE Firefox Safari Opera
transform36.0
12.0 -webkit-10.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
transform-origin (three-value syntax)
36.0
12.0 -webkit-
10.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
transform-style36.0
12.0 -webkit-11.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
perspective36.0
12.0 -webkit-10.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
perspective-origin36.0
12.0 -webkit-10.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
backface-visibility36.0
12.0 -webkit-10.016.0
10.0 -moz-
4.0 -webkit-23.0
15.0 -webkit-
转换属性
属性描述CSS 向元素应⽤ 2D 或 3D 转换。3
允许你改变被转换元素的位置。3
规定被嵌套元素如何在 3D 空间中显⽰。3
规定 3D 元素的透视效果。3
规定 3D 元素的底部位置。3
定义元素在不⾯对屏幕时是否可见。3
3D Transform⽅法
函数描述
matrix3d(n,n,n,n,n,n,
定义 3D 转换，使⽤ 16 个值的 4x4 矩阵。n,n,n,n,n,n,n,n,n,n)
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使⽤⽤于 X 轴的值。translateY(y)定义 3D 转化，仅使⽤⽤于 Y 轴的值。translateZ(z)定义 3D 转化，仅使⽤⽤于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定⼀个 X 轴的值。scaleY(y)定义 3D 缩放转换，通过给定⼀个 Y 轴的值。scaleZ(z)定义 3D 缩放转换，通过给定⼀个 Z 轴的值。rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。
常⽤⽅法
rotatex() ⽅法
通过 rotatex() ⽅法，元素围绕其 X 轴以给定的度数进⾏旋转。
5div
6{
7width:100px;
8height:75px;
9background-color:yellow;
10border:1px solid black;
11}
12div#div2
13{
14transform:rotateX(120deg);
15-webkit-transform:rotateX(120deg); /* Safari and Chrome */
16-moz-transform:rotateX(120deg); /* Firefox */
17}
18</style>
19</head>
20<body>
21
22<div>你好。这是⼀个 div 元素。</div>
23
24<div id="div2">你好。这是⼀个 div 元素。</div>
25
26<p><b>注释：</b> Internet Explorer 和 Opera 不⽀持 rotateX ⽅法。</p> 27
28</body>
29</html>
rotatey() ⽅法
通过 rotatey() ⽅法，元素围绕其 Y 轴以给定的度数进⾏旋转。
5div
6{
7width:100px;
8height:75px;
9background-color:yellow;
10border:1px solid black;
11}
12div#div2
13{
14transform:rotateY(130deg);
15-webkit-transform:rotateY(130deg); /* Safari and Chrome */
16-moz-transform:rotateY(130deg); /* Firefox */
17}
18</style>
19</head>
20<body>
21
22<div>你好。这是⼀个 div 元素。</div>
23
24<div id="div2">你好。这是⼀个 div 元素。</div>
25
26<p><b>注释：</b> Internet Explorer 和 Opera 不⽀持 rotateX ⽅法。</p> 27
28</body>
29</html>
结语
