CSS rotate özelliği

Önceki sayfa Sağ
Sonraki sayfa row-gap

Tanım ve kullanım

rotate Özelliği, elementi döndürmenizi sağlar.

rotate Özelliği, elementin z ekseni etrafında saat yönünde döndürme derecesini temsil eder. X eksenini, y eksenini veya başka bir şekilde döndürmek için, ilgili tanımı yapmak zorundasınız.

rotate Özelliğin değeri, bir açı, eksen adı + açı veya üç değer + açı olabilir.

Yalnızca bir açı verilirse, element z ekseni etrafında saat yönünde döner.
Bir eksen adı + açı verilirse, element belirlenen eksene göre saat yönünde döner.
Üç değer + açı verilirse, bu üç değer bir vektör tanımlar ve element bu vektör etrafında döner.

Daha iyi anlamak için rotate özelliklerini kontrol edin.Gösterim.

Dikkat:Elementi döndürmek için başka bir teknik, vektör ve açı ile birlikte CSS rotate() fonksiyonu CSS transform özelliği.

Örnek

Örnek 1

Elementin döndürmesini değiştirme:

div {
  rotate: 30deg;
}

Kişisel olarak deneyin

Örnek 2

şeklinde rotate Özellik, vektör ve açı olarak ayarlandığında, element bu vektör etrafında döner.

Burada, vektör iki boyutlu düzlemdeki [1 1 0] olarak, x ve y koordinatlarına sahiptir ve ardından 60 derece döner:

div {
  rotate: 1 1 0 60deg;
}

Kişisel olarak deneyin

CSS dilbilgisi

rotate: axis angle|initial|inherit;

Özellik değeri

Değer	Açıklama
axis	Opsiyonel. Ayarlanmamışsa, varsayılan değeri z eksenidir. Elementin etrafında döndüreceği eksen tanımlar. x y z
angle	Elementin döndürme derecesini tanımlar. Mümkün olan birimler: deg（dönme sayısı） rad（radyan） turn（dönme sayısı）
vector angle	Bu üç sayı, bir vektör tanımlar ve element, bu vektör etrafında döner. Bu üç sayı, vektörün x, y ve z koordinatlarını temsil eder. Sonuncu değer, döndürme açısını temsil eder. Mümkün olan değerler: number number number angle
initial	Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit	Bu özelliği, ebeveyn elementinden alır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer:	none
Geçirgenlik:	Hayır
Animasyon yapımı:	Destekleniyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.rotate="-120deg"