Kurs önerileri:

CSS rotateZ() fonksiyonu

Tanımlama ve kullanım rotateZ() CSS

rotateZ() Fonksiyon, bir elemanın z eksenine göre 3D dönüşümünü tanımlar. transform Özellikte kullanılır.

İpucu:rotateZ(angle) Eşdeğer rotate(angle)

Örnek

Örnek 1

Kullanım: rotateZ() Z eksenine göre birden fazla <div> öğesini döndürün:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Kişisel olarak deneyin

Örnek 2

Kullanım: rotateZ() Z eksenine göre resmi döndürün:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Kişisel olarak deneyin

CSS dilbilgisi

rotateZ(angle)
Değer Açıklama
angle

Gerekli. Döndürme açısını belirtin. Olası birimler:

  • deg(derece)
  • rad(radyan)
  • döndür(çember)

Teknik ayrıntılar

Sürüm: CSS Transforms Module Level 2

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

İlgili sayfalar

Eğitim:CSS 3D değiştirme

Referans:CSS transform özelliği

Referans:CSS rotate özelliği

Referans:CSS döndürme() fonksiyonu

Referans:CSS rotate3d() fonksiyonu

Referans:CSS rotateX() fonksiyonu

Referans:CSS rotateY() fonksiyonu