CSS 3D dönüşüm

CSS 3D dönüşüm

CSS 3D dönüşlerini de destekler.

Aşağıdaki öğelere fareniyi gezdirin, 2D ve 3D dönüşler arasındaki farkı görebilirsiniz:

2D döndürme
3D döndürme

Bu bölümde, aşağıdaki CSS özelliklerini öğreneceksiniz:

  • transform

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Özellik Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D dönüşüm yöntemleri

CSS ile transform Özellik, aşağıdaki 3D dönüşüm yöntemlerini kullanabilirsiniz:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() yöntemi

X Ekseninde Döndür

rotateX() Elementin X ekseninde belirli bir açıya dönmesini sağlayan yöntem:

Örnek

#myDiv {
  transform: rotateX(150deg);
}

Deneyin

rotateY() yöntemi

Y Ekseninde Döndür

rotateY() Elementin Y ekseninde belirli bir açıya dönmesini sağlayan yöntem:

Örnek

#myDiv {
  transform: rotateY(130deg);
}

Deneyin

rotateZ() yöntemi

rotateZ() Elementin Z ekseninde belirli bir açıya dönmesini sağlayan yöntem:

Örnek

#myDiv {
  transform: rotateZ(90deg);
}

Deneyin

CSS dönüşüm özellikleri

Aşağıdaki tablo, tüm 3D dönüşüm özelliklerini sıralar:

Özellik Açıklama
transform 2D veya 3D dönüşümünü elemente uygular.
transform-origin Dönüşüm edilen elementin konumunu değiştirmenizi sağlar.
transform-style Dahil edilen elementlerin 3D uzayda nasıl görüntüleneceğini belirler.
perspective 3D elementin perspektif etkisini belirler.
perspective-origin 3D elementin alt konumunu belirler.
backface-visibility Elementin ekranın karşısında olmadığında görünürlüğünü tanımlar.

CSS 3D dönüşüm yöntemleri

Fonksiyon Açıklama
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 3D dönüşümünü tanımlar, 16 değerli 4x4 matris kullanılarak.
translate3d(x,y,z) 3D dönüşümünü tanımlar.
translateX(x) 3D dönüşümünü tanımlar, sadece X ekseninin değerleri kullanılır.
translateY(y) 3D dönüşümünü tanımlar, sadece Y ekseninin değerleri kullanılır.
translateZ(z) 3D dönüşümünü tanımlar, sadece Z ekseninin değerleri kullanılır.
scale3d(x,y,z) 3D genişleme dönüşümünü tanımlar.
scaleX(x) 3D genişleme dönüşümünü tanımlar, X ekseninin bir değeri verilerek.
scaleY(y) 3D genişleme dönüşümünü tanımlar, Y ekseninin bir değeri verilerek.
scaleZ(z) 3D genişleme dönüşümünü tanımlar, Z ekseninin bir değeri verilerek.
rotate3d(x,y,z,angle) 3D dönüşümü tanımlar.
rotateX(angle) X eksenine göre 3D dönüşümü tanımlar.
rotateY(angle) Y eksenine göre 3D dönüşümü tanımlar.
rotateZ(angle) Z eksenine göre 3D dönüşümü tanımlar.
perspective(n) 3D dönüşüm elementinin perspektif görünümünü tanımlar.