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 method

Function

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.

Continuing Learning

new file

<!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 #div2{ height:200px; width:200px; background:lightcoral; -webkit-transition: all .6s; position:relative; -webkit-transform:rotateX(-80deg) translateZ(200px); } #test:hover #div2{ -webkit-transform: rotateX(80deg); } </style> <body> <div id="test"> <div id="div2"></div> </div> </body> </html>

submit Reset Code

Automatic operation

CSS3 3D Transformation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]