CSS3 3D Transformation

CSS3 3D Transforms

3D Transforms

CSS3 allows you to use 3D transforms to format elements.

In this chapter, you will learn some of these 3D transformation methods:

rotateX()
rotateY( )

rotateX() method

rotateX() method, rotates the The element to be rotated along the X-axis.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #f4ff99;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

Run the program and try it

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>
        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>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>

Run the program and try it

Conversion attributes

The following table lists all conversion attributes:

##PropertiesDescriptionCSStransformApply a 2D or 3D transform to an element. 3transform-originAllows you to change the position of the element being transformed. 3transform-styleSpecifies how nested elements are displayed in 3D space. 3perspectiveSpecifies the perspective effect of 3D elements. 3perspective-originSpecifies the bottom position of the 3D element. 3backface-visibilityDefines whether the element is visible when not facing the screen. 3

3D Conversion Method

# #FunctionDescription##matrix3d(ntranslate3d(xtranslateX(xtranslateY(ytranslateZ(zscale3d(xscaleX(xscaleY(yscaleZ(zrotate3d(xrotateX(anglerotateY(anglerotateZ(angleperspective(n


,n,n, n,n,n,n ,n,n,n,n,n,n,n,n,n )Define the 3D transformation, using a 4x4 matrix of 16 values.
,y,z)Define 3D transformation.
)Define a 3D translation, using only the values used for the X-axis.
)Define a 3D translation, using only the values used for the Y axis.
)Define a 3D translation, using only the value used for the Z axis.
,y,z)Define the 3D scaling transformation.
)Defines a 3D scaling transformation, given an X-axis value.
)Define the 3D scaling transformation by giving a Y-axis value.
)Defines a 3D scaling transformation, given a Z-axis value.
,y,z,angle)Define 3D rotation.
)Defines a 3D rotation along the X-axis.
)Defines a 3D rotation along the Y axis.
)Defines a 3D rotation along the Z axis.
) Defines the perspective view of a 3D transformed element.

Next Section

new file

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <style>
 div
 {
 width:100px;
 height:75px;
 background-color: #f4ff99;
 border:1px solid black;
 }
 div#div2
 {
 transform:rotateX(120deg);
 -webkit-transform:rotateX(120deg); /* Safari and Chrome */
 }
 </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen