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(an​​gle) 它指定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>