CSS | 3D-преобразования

Опубликовано: 1 Марта, 2022

Это позволяет изменять элементы с помощью трехмерных преобразований. В трехмерном преобразовании элементы вращаются по оси X, оси Y и оси Z.

Ниже перечислены три основных типа трансформации:

rotateX ()
rotateY ()
rotateZ ()

The rotateX() Method: This rotation is used to rotate an elements around X-axis at a given degree.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>3D Transformation</title>
        <style>
            .normal_div {
                width: 300px;
                height: 150px;
                color: white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                margin-bottom:20px;
            }
              
            #rotateX {
                width: 300px;
                height: 150px;
                color: white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                -webkit-transform: rotateX(180deg); /* Safari */
                transform: rotateX(180deg); /* Standard syntax */
                  
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#090;
            }
            .geeks {
                font-size:25px;
                font-weight:bold;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <center>
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">rotateX() Method</div>
            <div class = "normal_div"> Div Contents... </div>
            <div id="rotateX">180 degree rotated contents...</div>
        </center>
    </body>
</html>                                

Выход:

Метод rotateY (): этот метод используется для поворота элемента вокруг оси Y на заданные градусы.
Пример:

Выход:

The rotateZ() Method: This method is used to rotate an element around Z-axis at a given degree.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>3D Transformation</title>
        <style>
            .normal_div {
                width: 200px;
                height: 100px;
                font-size:25px;
                color:white;
                background-color: green;
                border: 1px solid black;
            }
              
            #rotateZ {
                width: 200px;
                height: 100px;
                color:white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                -webkit-transform: rotateZ(90deg); /* Safari */
                transform: rotateZ(90deg); /* Standard syntax */
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#090;
            }
            .geeks {
                font-size:25px;
                font-weight:bold;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <center>
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">rotateZ() Method</div>
            <div class = "normal_div"> Div Contents... </div>
            <div id="rotateZ">90 degree rotated contents...</div>
        </center>
    </body>
</html>                    

Выход:

HTML CSS

CSS | 3D-преобразования

РЕКОМЕНДУЕМЫЕ СТАТЬИ