CSS3 - 2d преобразования

2D-преобразования используются для повторного изменения структуры элемента, например, для перемещения, поворота, масштабирования и наклона.

В следующей таблице содержатся общие значения, которые используются в 2D-преобразованиях.

Sr. No. Значение и описание
1

matrix(n,n,n,n,n,n)

Используется для определения матричных преобразований с шестью значениями

2

translate(x,y)

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

3

translateX(n)

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

4

translateY(n)

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

5

scale(x,y)

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

6

scaleX(n)

Используется для изменения ширины элемента

7

scaleY(n)

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

8

rotate(angle)

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

9

skewX(angle)

Используется для определения преобразований наклона вместе с осью x

10

skewY(angle)

Используется для определения наклонных преобразований вместе с осью Y

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

Повернуть на 20 градусов

Поворот коробки под углом 20 градусов, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Повернуть -20 градусов

Поворот коробки с углом -20 градусов, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Наклон оси X

Вращение прямоугольника с наклоном оси x, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Наклон оси Y

Вращение коробки с наклоном оси y, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Матричное преобразование

Вращение коробки с матричными преобразованиями, как показано ниже -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -

Матрица трансформируется в другом направлении.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

Это даст следующий результат -