原始網址：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>