CSS 3D转换 CSS3D转换|CSS2

本文概述

支持的浏览器
3D rotationX()方法（X轴旋转??）
3D rotationY()方法（Y轴旋转）
3D rotationZ()方法（Z轴旋转）

【CSS 3D转换】CSS 3D变换使你可以将元素移动到X轴, Y轴和Z轴。以下是3D变换方法的列表：

功能	描述
matrix3D(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	它使用16个值的4× 4矩阵指定3D转换。
translate3D(x, y, z)	它指定3D转换。
translateX(x)	它仅使用X轴的值指定3D平移。
translateY(y)	它仅使用Y轴的值指定3D平移。
translateZ(z)	它仅使用Z轴的值指定3D平移。
scale3D(x, y, z)	它指定3D比例转换
scaleX(x)	它通过给出X轴的值来指定3D比例转换。
scaley(y)	它通过给出Y轴的值来指定3D比例转换。
scaleZ(z)	它通过给出Z轴的值来指定3D比例转换。
rotate3D(X, Y, Z, angle)	它指定3D旋转以及X轴, Y轴和Z轴。
rotateX(angle)	它指定3D旋转以及X轴。
rotateY(angle)	它指定3D旋转以及Y轴。
rotateZ(angle)	它指定3D旋转以及Z轴。
perspective(n)	它指定了3D变换元素的透视图。

支持的浏览器

属性	铬	IE浏览器	火狐浏览器	歌剧	苹果浏览器
transform	36.012.0 -webkit-	10.0	16.0 10.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
转换原点（三值语法）	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-style	36.012.0 -webkit-	11.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective-origin	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-

3D rotationX()方法（X轴旋转??）CSS 3D rotationX()方法用于根据给定的度数围绕元素的X轴旋转元素。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { width: 300px; height: 100px; background-color: lightpink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } < /style> < /head> < body> < div> This is srcmini! < /div> < div id="myDiv"> This is srcmini! < /div> < p> < b> Note:< /b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.< /p> < /body> < /html>

3D rotationY()方法（Y轴旋转）CSS 3D rotationY()方法用于根据给定的度数围绕元素的Y轴旋转元素。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> div { width: 300px; height: 100px; background-color:lightpink; border: 1px solid black; }div#myDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } < /style> < /head> < body> < div> Welcome to srcmini!. < /div> < div id="myDiv"> Welcome to srcmini!. < /div> < p> < b> Note:< /b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.< /p> < /body> < /html>

3D rotationZ()方法（Z轴旋转）CSS 3D rotationZ()方法用于根据给定的度数围绕元素的Z轴旋转元素。
看这个例子：

< !DOCTYPE html> < html> < head> < style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } < /style> < /head> < body> < div> Welcome to srcmini! < /div> < div id="myDiv"> Welcome to srcmini! < /div> < p> < b> Note:< /b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.< /p> < /body> < /html>