CSS3 3D Transformation
Before studying this section, let’s take a look at the 3D coordinate axes
Use X, Y, and Z to represent the three dimensions of space respectively, and the three axes are perpendicular to each other.
3D Transforms
CSS3 allows you to use 3D transforms to format elements.
In this chapter, you will learn some of these 3D conversion methods:
rotateX()
rotateY()
Browser Support
rotateX() method
rotateX() method rotates an element around its X-axis at a given degree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s;
}
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>rotateY() method
rotateY() method, rotates an element around its Y-axis by a given degree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#test{
width:400px;
height:400px;
position:absolute;
margin-left:100px;
margin-top: 100px;
/* 光源设置为离页面200像素的位置 */
perspective:200px;
}
#test1{
width:400px;
height:400px;
position:relative;
/* 相当于指定一个3D的空间 */
transform-style:preserve-3d;
}
#div2{
width:400px;
height:400px;
position:relative;
background:lightcoral;
/* 指定变换效果，变换时间为1S */
-webkit-transition: all 1s;
}
#test #test1:hover #div2{
/* 绕Y轴旋转180度 */
-webkit-transform: rotateY(180deg);
}
</style>
<body>
<div id="test">
<div id="test1">
<div id="div2"></div>
</div>
</div>
</body>
</html>Conversion Properties
The following table lists all conversion properties:
Property
#transform Applies a 2D or 3D transformation to an element. 3
transform-origin Allows you to change the position of the transformed element. 3
transform-style Specifies how nested elements are displayed in 3D space. 3
perspective Specifies the perspective effect of 3D elements. 3
perspective-origin Specifies the bottom position of the 3D element. 3
backface-visibility Defines whether the element is visible when not facing the screen. 3
3D conversion methodFunction
Description
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines 3D transformation, using a 4x4 matrix of 16 values.
translate3d(x,y,z) Define 3D transformation.
translateX(x) Defines a 3D translation, using only the values used for the X-axis.
translateY(y) Defines a 3D translation, using only the values used for the Y axis.
translateZ(z) Defines a 3D translation, using only the value used for the Z axis.
scale3d(x,y,z) Define 3D scaling transformation.
scaleX(x) Defines a 3D scaling transformation by giving an X-axis value.
scaleY(y) Defines the 3D scaling transformation by giving a Y-axis value.
scaleZ(z) Defines a 3D scaling transformation by giving a Z-axis value.
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 the perspective view of the 3D transformed element.
