Atrybut rotate w CSS

Poprzednia strona Prawo
Następna strona row-gap

Definicja i zastosowanie

rotate Atrybut pozwala obracać element.

rotate Atrybut definiuje wartość, która reprezentuje stopień obrotu elementu wokół osi z. Aby obrócić element wokół osi x, y lub w inny sposób, konieczne jest dokonanie odpowiednich definicji.

rotate Wartości atrybutu mogą być kątem, nazwą osi + kątem lub trzema wartościami + kątem.

Jeśli podany jest tylko kąt, element obraca się wokół osi z w kierunku zgodnym z ruchem wskazówki zegara.
Jeśli podany jest nazwa osi + kąt, element obraca się wokół podanej osi w kierunku zgodnym z ruchem wskazówki zegara.
Jeśli podane są trzy wartości + kąt, te trzy wartości definiują wektor, wokół którego element będzie obracał się.

Aby lepiej zrozumieć rotate Atrybut, proszę zobaczyćPrzykłady。

Uwaga：Innym sposobem na obrót elementu jest użycie atrybutu Funkcja rotate() w CSS CSS transform atrybutu.

Przykład

Przykład 1

Zmiana obrotu elementu：

div {
  rotate: 30deg;
}

Spróbuj sam

Przykład 2

Kiedy rotate Kiedy ustawiane są atrybuty wektora i kąta, element obraca się wokół tego wektora.

W tym przypadku wektor to [1 1 0] na płaszczyźnie dwuwymiarowej, z współrzędnymi x i y, a następnie obrót o 60 stopni：

div {
  rotate: 1 1 0 60deg;
}

Spróbuj sam

Gramatyka CSS

rotate: ось kąt|initial|inherit;

Wartość atrybutu

Wartość	Opis
ось	opcjonalne. Jeśli nie jest ustawione, wartością domyślną jest oś z. Definiuje oś, wokół której element będzie obracał się. x y z
kąt	Definiuje stopień obrotu elementu. Możliwe jednostki： deg（stopnie） rad（radiany） obrót（obrót）
wektor kąt	Trzy liczby definiują wektor, wokół którego element będzie obracał się. Te trzy liczby to współrzędne wektora x, y i z. Ostatnia wartość to kąt obrotu. Możliwe wartości： liczba liczba liczba kąt
initial	Ustawienie tej właściwości na jej wartość domyślną. Zobacz: initial。
inherit	Zarówno ta właściwość, jak i jej wartości są dziedziczone od elementu nadrzędnego. Zobacz: inherit。

Szczegóły techniczne

Domyślna wartość：	none
Inheritance:	Nie
Tworzenie animacji：	Obsługiwane. Zobacz:Atrybuty związane z animacją。
Wersja：	CSS3
JavaScript语法：	object.style.rotate="-120deg"