srcmini本文概述
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>
评论前必须登录！
注册