CSS3 — 3D-трансформации

Поділитись

Используя 3d-преобразования, мы можем переместить элемент по оси x, y и z, ниже приведен пример, в котором четко показано, как элемент будет вращаться.

Методы трехмерных преобразований

Ниже методы используются для вызова 3D-преобразований —

Sr.No.	Значение и описание
1	matrix3d (п, п, п, п, п, п, п, п, п, п, п, п, п, п, п, п)Используется для преобразования элемента с использованием 16 значений матрицы
2	translate3d (х, у, г)Используется для преобразования элемента с использованием осей X, Y и Z
3	translateX (х)Используется для преобразования элемента с помощью оси X
4	translateY (у)Используется для преобразования элемента с использованием оси Y
5	translateZ (г)Используется для преобразования элемента с использованием оси Y
6	Scalex (х)Используется для масштабирования преобразований элемента с использованием оси X
7	ScaleY (у)Используется для масштабирования преобразований элемента с использованием оси Y
8	ScaleY (у)Используется для преобразования элемента с использованием оси Z
9	rotateX (угол)Используется для поворота, трансформирует элемент с помощью оси X
10	rotateY (угол)Используется для поворота и преобразования элемента с использованием оси Y
11	rotateZ (угол)Используется для поворота и преобразования элемента с использованием оси Z

matrix3d (п, п, п, п, п, п, п, п, п, п, п, п, п, п, п, п)

Используется для преобразования элемента с использованием 16 значений матрицы

translate3d (х, у, г)

Используется для преобразования элемента с использованием осей X, Y и Z

translateX (х)

Используется для преобразования элемента с помощью оси X

translateY (у)

Используется для преобразования элемента с использованием оси Y

translateZ (г)

Используется для преобразования элемента с использованием оси Y

Scalex (х)

Используется для масштабирования преобразований элемента с использованием оси X

ScaleY (у)

Используется для масштабирования преобразований элемента с использованием оси Y

ScaleY (у)

Используется для преобразования элемента с использованием оси Z

rotateX (угол)

Используется для поворота, трансформирует элемент с помощью оси X

rotateY (угол)

Используется для поворота и преобразования элемента с использованием оси Y

rotateZ (угол)

Используется для поворота и преобразования элемента с использованием оси Z

3D-преобразования по оси X

В следующем примере показаны трехмерные преобразования по оси X.

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

Поділитись