CSS 3D转换
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，n） | 它使用16个值的4x4矩阵指定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（角度） | 它指定3D旋转以及Y轴。 |
| rotateZ（angle） | 它指定3D旋转以及Z轴。 |
| perspective（n） | 它指定了3D变换后的元素的透视图。 |
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 lidihuo!
</div>
<div id="myDiv">
This is lidihuo!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>
</body>
</html>
3D旋转Y()方法（Y轴旋转）
CSS 3D旋转Y()方法用于根据元素绕其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 lidihuo!.
</div>
<div id="myDiv">
Welcome to lidihuo!.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>
3D旋转Z()方法（Z轴旋转）
CSS 3D旋转Z()方法用于根据给定的元素围绕其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 lidihuo!
</div>
<div id="myDiv">
Welcome to lidihuo!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>