CSS3 - 2d Transforms
Przekształcenia 2D służą do ponownej zmiany struktury elementu, jak przesuwanie, obracanie, skalowanie i pochylanie.
Poniższa tabela zawiera typowe wartości używane w przekształceniach 2D -
| Sr.No. | Wartość i opis |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Służy do definiowania przekształceń macierzy z sześcioma wartościami |
| 2 | translate(x,y) Służy do przekształcania elementu wraz z osią X i Y. |
| 3 | translateX(n) Służy do przekształcania elementu wraz z osią X. |
| 4 | translateY(n) Służy do przekształcania elementu wraz z osią y |
| 5 | scale(x,y) Służy do zmiany szerokości i wysokości elementu |
| 6 | scaleX(n) Służy do zmiany szerokości elementu |
| 7 | scaleY(n) Służy do zmiany wysokości elementu |
| 8 | rotate(angle) Służy do obracania elementu na podstawie kąta |
| 9 | skewX(angle) Służy do definiowania przekształceń pochylenia wraz z osią x |
| 10 | skewY(angle) Służy do definiowania przekształceń pochylenia wraz z osią y |
Poniższe przykłady przedstawiają przykład wszystkich powyższych właściwości.
Obróć o 20 stopni
Obrót pudełka z kątem 20 stopni, jak pokazano poniżej -
<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>To da następujący wynik -
Obróć o -20 stopni
Obrót pudełka z kątem -20 stopni, jak pokazano poniżej -
<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>To da następujący wynik -
Pochyl oś X.
Obrót pudełka ze skośną osią X, jak pokazano poniżej -
<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>To da następujący wynik -
Skośna oś Y.
Obrót pudełka ze skośną osią Y, jak pokazano poniżej -
<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>To da następujący wynik -
Transformacja macierzy
Obrót pola z transformacjami Matrix, jak pokazano poniżej -
<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>To da następujący wynik -
Matrix przekształca się w innym kierunku.
<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>To da następujący wynik -