CSS 3D Dönüşümleri

ByESiNTi · 23 Tem 2021

CSS 3D Dönüşüm Yöntemleri

CSS ayrıca 3B dönüşümleri de destekler.
CSS transformözelliği ile aşağıdaki 3B dönüştürme yöntemlerini kullanabilirsiniz:

rotateX()
rotateY()
rotateZ()

döndürmeX() Yöntemi

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>

</body>
</html>

döndürmeY() Yöntemi

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

rotateY()Yöntem, belirli bir derecede kendi Y ekseni etrafında bir eleman döner:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>

</body>
</html>

döndürmeZ() Yöntemi

rotateZ()Yöntem, belirli bir derecede kendi Z ekseni etrafında bir eleman döner:

Örnek

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>

</body>
</html>

CSS Dönüştürme Özellikleri

Aşağıdaki tablo, tüm 3B dönüştürme özelliklerini listeler:

Property	Description
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Applies a 2D or 3D transformation to an element
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Allows you to change the position on transformed elements
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies how nested elements are rendered in 3D space
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the perspective on how 3D elements are viewed
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the bottom position of 3D elements
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Defines whether or not an element should be visible when not facing the screen

CSS 3D Dönüştürme Yöntemleri

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element