Учебники

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

Сентябрь 21, 2018

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

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

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

матрица (п, п, п, п, п, п)

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

2

переводить (х, у)

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

3

translateX (п)

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

4

translateY (п)

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

5

шкала (х, у)

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

6

Scalex (п)

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

7

ScaleY (п)

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

8

поворота (угол)

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

9

skewX (угол)

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

10

skewY (угол)

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

матрица (п, п, п, п, п, п)

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

переводить (х, у)

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

translateX (п)

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

translateY (п)

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

шкала (х, у)

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

Scalex (п)

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

ScaleY (п)

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

поворота (угол)

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

skewX (угол)

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

skewY (угол)

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

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

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

Вращение коробки с углом 20 градусов, как показано ниже —

Live Demo

<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 градусов, как показано ниже —

Live Demo 

<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, как показано ниже —

Live Demo 

<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, как показано ниже —

Live Demo 

<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>

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

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

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

Live Demo 

<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>

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

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

Live Demo 

<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>

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

43
Share: