CSS3 - 2d Dönüşümler
2B dönüştürmeler, eleman yapısını çevirme, döndürme, ölçekleme ve eğme olarak yeniden değiştirmek için kullanılır.
Aşağıdaki tablo, 2B dönüşümlerde kullanılan ortak değerleri içermektedir -
| Sr.No. | Değer ve Açıklama |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Altı değerli matris dönüşümlerini tanımlamak için kullanılır |
| 2 | translate(x,y) Öğeyi x ekseni ve y ekseni ile birlikte dönüştürmek için kullanılır |
| 3 | translateX(n) Öğeyi x ekseni ile birlikte dönüştürmek için kullanılır |
| 4 | translateY(n) Öğeyi y ekseniyle birlikte dönüştürmek için kullanılır |
| 5 | scale(x,y) Elemanın genişliğini ve yüksekliğini değiştirmek için kullanılır |
| 6 | scaleX(n) Elemanın genişliğini değiştirmek için kullanılır |
| 7 | scaleY(n) Elemanın yüksekliğini değiştirmek için kullanılır |
| 8 | rotate(angle) Öğeyi bir açıya göre döndürmek için kullanılır |
| 9 | skewX(angle) X ekseni ile birlikte çarpık dönüşümleri tanımlamak için kullanılır |
| 10 | skewY(angle) Y ekseni boyunca eğriltme dönüşümlerini tanımlamak için kullanılır |
Aşağıdaki örnekler, yukarıdaki tüm özelliklerin örneklerini göstermektedir.
20 derece döndür
Aşağıda gösterildiği gibi 20 derece açıyla kutu dönüşü -
<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>Aşağıdaki sonucu verecektir -
-20 derece döndür
Aşağıda gösterildiği gibi -20 derece açıyla kutu dönüşü -
<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>Aşağıdaki sonucu verecektir -
X ekseni eğriltme
Aşağıda gösterildiği gibi çarpık x ekseni ile kutu dönüşü -
<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>Aşağıdaki sonucu verecektir -
Y ekseni eğriltme
Aşağıda gösterildiği gibi eğik y ekseni ile kutu dönüşü -
<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>Aşağıdaki sonucu verecektir -
Matris dönüşümü
Aşağıda gösterildiği gibi Matrix dönüştürmeleriyle kutu dönüşü -
<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>Aşağıdaki sonucu verecektir -
Matris başka bir yönde dönüşür.
<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>Aşağıdaki sonucu verecektir -