Atrybut translate w CSS

poprzednia strona transition-timing-function
Następna strona unicode-bidi

Definicja i użycie

translate Atrybut pozwala zmieniać pozycję elementu.

translate Atrybut definiuje współrzędne osi X i Y elementu w dwuwymiarowej przestrzeni. Możesz również zdefiniować współrzędne osi Z, aby zmienić pozycję w trójwymiarowej przestrzeni.

Koordynaty mogą zawierać tylko współrzędne osi X, współrzędne osi X i Y, lub współrzędne osi X, Y i Z.

Aby lepiej zrozumieć translate Atrybut, zobacz:Demonstracja.

Wskazówka:Aby atrybut osi Z działał, musisz zdefiniować wartość atrybutu CSS perspective.

Uwaga:Innym sposobem przesunięcia elementu jest użycie z Funkcja translate() w CSS Atrybut CSS transform na tej stronie można powiedzieć, że jest bardziej prostym i bezpośrednim sposobem przesunięcia elementu.

Przykład

Przykład 1

Zmień pozycję elementu:

div {
  translate: 100px 20px;
}

Spróbuj sam

Przykład 2

Kiedy ustawiamy osi Z translate Atrybut musi być ustawiony również w elemencie nadrzędnym, gdy ustawiamy atrybut perspective Musimy ustawić atrybut, aby zobaczyć jakikolwiek efekt:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Spróbuj sam

CSS Syntax

translate: osi X osi Y osi Z|initial|inherencyjność;

Wartość atrybutu

Wartość	Opis
osi X	Definiuje pozycję na osi X. Możliwe wartości: Długość Procent
osi Y	Definiuje pozycję na osi Y. Możliwe wartości: Długość Procent
osi Z	Definiuje pozycję na osi Z. Możliwe wartości: Długość Procent
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherencyjność	Przekształca tę właściwość z elementu nadrzędnego. Zobacz: inherencyjność.

Szczegóły techniczne

Domyślna wartość:	brak
Inherencyjność:	nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
JavaScript Syntax:	object.style.translate="10px 20px"