CSS3 - 3B Dönüşümler
3d dönüşümleri kullanarak, elemanı x eksenine, y eksenine ve z eksenine taşıyabiliriz. Aşağıdaki örnek, elemanın nasıl döneceğini açıkça belirtir.
3B dönüşüm yöntemleri
3D dönüşümleri çağırmak için aşağıdaki yöntemler kullanılır -
Sr.No. | Değer ve Açıklama |
---|---|
1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Öğeyi 16 matris değeri kullanarak dönüştürmek için kullanılır |
2 | translate3d(x,y,z) X ekseni, y ekseni ve z ekseni kullanarak öğeyi dönüştürmek için kullanılır |
3 | translateX(x) X ekseni kullanarak öğeyi dönüştürmek için kullanılır |
4 | translateY(y) Öğeyi y eksenini kullanarak dönüştürmek için kullanılır |
5 | translateZ(z) Öğeyi y eksenini kullanarak dönüştürmek için kullanılır |
6 | scaleX(x) X ekseni kullanarak öğeyi dönüştürür. |
7 | scaleY(y) Ölçeklendirmek için kullanılır, y eksenini kullanarak öğeyi dönüştürür |
8 | scaleY(y) Öğeyi z eksenini kullanarak dönüştürmek için kullanılır |
9 | rotateX(angle) Döndürmek için kullanılır x eksenini kullanarak öğeyi dönüştürür |
10 | rotateY(angle) Döndürmek için kullanılır, y eksenini kullanarak öğeyi dönüştürür |
11 | rotateZ(angle) Döndürmek için kullanılır, z eksenini kullanarak öğeyi dönüştürür |
X ekseni 3B dönüşümleri
Aşağıdaki bir örnek, x ekseni 3B dönüşümlerini gösterir.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>
Aşağıdaki sonucu verecektir -
Y ekseni 3B dönüşümler
Aşağıdaki bir örnek, y ekseni 3B dönüşümlerini gösterir -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>
Aşağıdaki sonucu verecektir -
Z ekseni 3B dönüşümler
Aşağıdaki örnek, Z ekseni 3B dönüşümlerini göstermektedir -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>
Aşağıdaki sonucu verecektir -