亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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中文網(wǎng)(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中文網(wǎng)(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.


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
submitReset Code