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>Это даст следующий результат -