原始网址：http://www.w3schools.com/css/css3_3dtransforms.asp
翻译：
CSS3 3D 变换（CSS3 3D Transforms）
CSS 3D 变换
CSS3 允许你使用 3D 变换（3D transformations）格式化元素。
将鼠标指针移至以下元素，查看 2D 和 3D 变换的区别：
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CSS3 2D Transforms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#rotate2D, #rotate3D {
width: 80px;
height: 70px;
color: white;
position: relative;
font-weight: bold;
font-size: 15px;
padding: 10px;
float: left;
margin-right: 50px;
border-radius: 5px;
border: 1px solid #000000;
background: red;
margin: 10px;
}
</style>
<script>
var x, y, n = 0, ny = 0, rotINT, rotYINT;
function rotateDIV() {
x = document.getElementById("rotate2D");
clearInterval(rotINT);
rotINT = setInterval("startRotate()", 10);
}
function rotateYDIV() {
y = document.getElementById("rotate3D");
clearInterval(rotYINT);
rotYINT = setInterval("startYRotate()", 10);
}
function startRotate() {
n = n + 1;
x.style.transform = "rotate(" + n + "deg)";
x.style.webkitTransform = "rotate(" + n + "deg)";
x.style.OTransform = "rotate(" + n + "deg)";
x.style.MozTransform = "rotate(" + n + "deg)";
if (n == 180 || n == 360) {
clearInterval(rotINT);
if (n == 360) {
n = 0;
}
}
}
function startYRotate() {
ny = ny + 1;
y.style.transform = "rotateY(" + ny + "deg)";
y.style.webkitTransform = "rotateY(" + ny + "deg)";
y.style.OTransform = "rotateY(" + ny + "deg)";
y.style.MozTransform = "rotateY(" + ny + "deg)";
if (ny == 180 || ny >= 360) {
clearInterval(rotYINT);
if (ny >= 360) {
ny = 0;
}
}
}
</script>
</head>
<body>
<div style="height: 80px;">
<div onmouseover="rotateDIV()" id="rotate2D">2D rotate</div>
<div onmouseover="rotateYDIV()" id="rotate3D">3D rotate</div>
</div>
</body>
</html>Browser Support for 3D Transforms
表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit-、-moz- 或 -o- 指定带前缀工作的第一个版本号。
| 属性（Property） |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 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- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS3 3D 变换
在本章，你将学习到以下 3D 变换方法：
- rotateX()
- rotateY()
- rotateZ()
rotateX() 方法（The rotateX() Method）
rotateX() 方法使元素以给定的度数绕 X 轴旋转：
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>This a normal div element.</div>
<div id="myDiv">The rotateX() method rotates an element around its X-axis at a given degree. This div element is rotated 150 degrees.</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>
</body>
</html>rotateY() 方法（The rotateY() Method）
rotateY() 方法使元素以给定的度数绕 Y 轴旋转：
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>This a normal div element.</div>
<div id="myDiv">The rotateY() method rotates an element around its Y-axis at a given degree. This div element is rotated 150 degrees.</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>rotateZ() 方法（The rotateZ() Method）
rotateZ() 方法使元素以给定的度数绕 Z 轴旋转：
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
<!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>This a normal div element.</div>
<div id="myDiv">The rotateZ() method rotates an element around its Z-axis at a given degree. This div element is rotated 90 degrees.</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>