CSS 2D Dönüşümleri

ByESiNTi · 23 Tem 2021

CSS 2D Dönüşümleri

CSS dönüşümleri, öğeleri taşımanıza, döndürmenize, ölçeklendirmenize ve eğmenize olanak tanır.

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

CSS transformözelliği ile aşağıdaki 2B dönüştürme yöntemlerini kullanabilirsiniz:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

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

translate()Yöntemi (X-ekseni ve Y-ekseni için verilen parametrelere göre) mevcut pozisyonundan bir elemanı taşır.

Aşağıdaki örnek, <div> öğesini mevcut konumundan 50 piksel sağa ve 100 piksel aşağı taşır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

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

rotate()Yöntem, belirli bir dereceye kadar uygun bir eleman saat yönünde veya saat yönünün tersine döner.

Aşağıdaki örnek, <div> öğesini 20 derece saat yönünde döndürür:

Kod:

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

div#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

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

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

</body>
</html>

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

scale()Yöntem artar ya da (genişlik ve yükseklik verilen parametrelere göre) bir elemanının boyutunu azaltır.

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin iki katı ve orijinal yüksekliğinin üç katı olacak şekilde artırır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin ve yüksekliğinin yarısı olacak şekilde azaltır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(0.5,0.5); /* IE 9 */
  transform: scale(0.5,0.5); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

scaleX() Yöntemi

scaleX()Yöntem artar veya bir elemanın genişliği azaltır.

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin iki katı olacak şekilde artırır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(2); /* IE 9 */
  transform: scaleX(2); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>
<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin yarısı olacak şekilde azaltır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(0.5); /* IE 9 */
  transform: scaleX(0.5); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>
<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

scaleY() Yöntemi

scaleY()Yöntem artar veya bir elemanın yüksekliği azalır.

Aşağıdaki örnek, <div> öğesini orijinal yüksekliğinin üç katı olacak şekilde artırır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(3); /* IE 9 */
  transform: scaleY(3); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>
<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

Aşağıdaki örnek, <div> öğesini orijinal yüksekliğinin yarısı olacak şekilde azaltır:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(0.5); /* IE 9 */
  transform: scaleY(0.5); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>
<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

skewX() Yöntemi

skewX()Yöntem, belirli bir açı ile X ekseni boyunca bir öğe eğriltir.

Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece eğmektedir:

Kod:

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

div#myDiv {
  -ms-transform: skewX(20deg); /* IE 9 */
  transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>
<p>The skewX() method skews an element along the X-axis by the given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

skewY() Yöntemi

skewY()Yöntem, belirli bir açı ile, Y-ekseni boyunca bir öğe eğriltir.

Aşağıdaki örnek, <div> öğesini Y ekseni boyunca 20 derece eğmektedir:

Kod:

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

div#myDiv {
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>
<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

skew() Yöntemi

skew()Yöntem, belirli açıları ile, X ve Y-ekseni boyunca bir öğe eğriltir.

Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğmektedir:

Kod:

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

div#myDiv {
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  transform: skew(20deg,10deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

İkinci parametre belirtilmezse sıfır değerine sahiptir. Bu nedenle, aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece eğmektedir:

Örnek

Kod:

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

div#myDiv {
  -ms-transform: skew(20deg); /* IE 9 */
  transform: skew(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

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

matrix()Yöntem birleştirir tüm 2D birine dönüşüm yöntemleri.

matrix() yöntemi, öğeleri döndürmenize, ölçeklemenize, taşımanıza (çevirmenize) ve eğriltmenize olanak tanıyan matematik işlevleri içeren altı parametre alır.

Parametreler aşağıdaki gibidir: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Kod:

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

div#myDiv1 {
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}

div#myDiv2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>
<p>The matrix() method combines all the 2D transform methods into one.</p>

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

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

CSS Dönüştürme Özellikleri

Aşağıdaki tablo tüm 2B 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

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

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis