CSS3 3D conversion
May 04, 2021 CSS3
Table of contents
3D conversion
CSS3 allows you to format elements using 3D conversions.
Click on the elements below to see the difference between a 2D conversion and a 3D conversion, and choose which conversion to choose according to your needs:
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Property | Google Chrome | ie browser | Sohu Browser | Webkit browser |
Opera browser |
|---|---|---|---|---|---|
| transform |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
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- |
4.0 -webkit- |
23.0
15.0 -webkit- |
| transform-style |
36.0
12.0 -webkit- |
11.0 |
16.0
10.0 -moz- |
4.0 -webkit- |
23.0
15.0 -webkit- |
| perspective |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
4.0 -webkit- |
23.0
15.0 -webkit- |
| perspective-origin |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
4.0 -webkit- |
23.0
15.0 -webkit- |
| backface-visibility |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
4.0 -webkit- |
23.0
15.0 -webkit- |
RotateX() method
The rotateX() method, which rotates elements around its X axis in a given degree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3C(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>RotateY() method
The rotateY() method, an element that rotates around its Y axis in a given degree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3C(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Transform the property
The following table lists all the conversion properties of CSS3:
| Property | Describe | Css |
|---|---|---|
| transform | Apply a 2D or 3D conversion to an element. | 3 |
| transform-origin | Allows you to change the position of the converted element. | 3 |
| transform-style | Specifies how nested elements are displayed in 3D space. | 3 |
| perspective | Specifies the perspective effect of a 3D element. | 3 |
| perspective-origin | Specifies the bottom position of the 3D element. | 3 |
| backface-visibility | Defines whether an element is visible when it is not facing the screen. | 3 |
3D conversion method
| Function | Describe |
|---|---|
|
matrix3d(
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
,
n
)
|
Define a 3D transformation that uses a 4x4 matrix of 16 values. |
| translate3d( x , y , z ) | Define 3D conversions. |
| translateX( x ) | Define 3D conversions, using only the values used for the X-axis. |
| translateY( y ) | Define 3D conversions, using only the values used for the Y-axis. |
| translateZ( z ) | Define a 3D conversion that uses only the values used for the Z-axis. |
| scale3d( x , y , z ) | Define a 3D scale conversion. |
| scaleX( x ) | Defines a 3D scale conversion by inglysing the value of an X-axis. |
| scaleY( y ) | Defines a 3D scale conversion by inglysing the value of a Y axis. |
| scaleZ( z ) | Defines a 3D zoom conversion by inglysing the value of a Z-axis. |
| rotate3d( x , y , z , angle ) | Define 3D rotation. |
| rotateX( angle ) | Defines 3D rotation along the X-axis. |
| rotateY( angle ) | Defines 3D rotation along the Y axis. |
| rotateZ( angle ) | Defines 3D rotation along the Z-axis. |
| perspective( n ) | Defines a perspective view of 3D transform elements. |
By learning about 3D conversions to make your styles more three-dimensional, W3Cschool recommends that you be able to favorite this article or save it locally for later search!