CSS Transform Translate | Wyjaśnione

Opracowując dowolną aplikację, programiści muszą, aby projekt witryny był atrakcyjny, a także interaktywny. Aby to zrobić, można wykorzystać kilka właściwości CSS, takich jak przejście, animacja i wiele innych. Mówiąc dokładniej, „przekształcać”Własność pozycjonuje element na osi x, osi y i osi Z.

Ten zapis wyjaśni właściwość transformacji CSS z funkcją wartości tłumacz ().

Przykładowy scenariusz

W przypadku demonstracji stworzymy dwa obrazy ułożone nad sobą. Pierwszy będzie statyczny i nieco nieprzezroczysty, podczas gdy drugi będzie ruchomy. Co więcej, „przekształcać„Własność jest stosowana do drugiego elementu, tak aby poruszał się w stosunku do nieprzezroczystego obrazu.

Krok 1: Dodaj obrazy w HTML

W HTML najpierw utwórz element div o nazwie klasy „główna zawartość". W ramach tego elementu Div dodaj kolejny div z nazwą klasy „Move-Img". Wewnątrz tego elementu Div dodaj dwa elementy, z których każdy ma atrybuty:

• "src”Atrybut określa ścieżkę obrazu.
• "klasa„Wartość atrybutu jest dodawana w celu uzyskania dostępu do odpowiedniego elementu w CSS.
• "Alt”Określa tekst, który zostanie wyświetlony, jeśli obraz nie przesyła.
• "szerokość”Właściwość określa szerokość dodanego elementu HTML.

Oto kod HTML:

Krok 2: Zastosowanie CSS

Przejdźmy naprzód, aby zastosować właściwości stylizacji CSS do elementów HTML.

Element „Body” stylu

ciało
kolor tła: #B4CDE6;

„„kolor tła„Nieruchomość jest stosowana do ustawienia koloru tła elementu ciała.

Style „Move-Img” div

.Move-Img
Pozycja: względny;
szerokość: 300px;
Margines: Auto;
margines: 40px;

„„Move-Img„Element DIV jest stosowany z następującymi właściwościami CSS:

• "pozycja„Własność o wartości”względny”Ustawia pozycję elementu w stosunku do jego normalnej pozycji.
• "szerokość„Właściwość ustawia szerokość elementu.
• "margines„Właściwość jest wykorzystywana do ustawienia wysokości elementu.
• "margines„Właściwość określa miejsce u góry treści elementu.

Styl „IMG-1” div

.IMG-1
Pozycja: absolutna;
Krycie: 0.12;

„„IMG-1„Div jest stylizowany w następujący sposób:

• "pozycja„Własność o wartości”absolutny”Umieści element względem jego najbliższego elementu nadrzędnego.
• "nieprzezroczystość”Określa przejrzystość elementu.

Styl „IMG-2” div

.IMG-2
Pozycja: absolutna;

W ten sam sposób ustawiliśmy „IMG-2„Div.

Wyjście

Jak przekształcić pozycję obiektu w HTML?

„„przekształcać„Własność pozwala nam obracać, wypaczać, skalować lub tłumaczyć element. Mówiąc bardziej, „„ „Tłumaczyć()”Funkcja dostosowuje pozycję elementu na osi x, y i. Funkcjonalność „Tłumaczyć„Własność jest taka sama jak funkcja tłumacza () używana z właściwością transformacji.

Jakie są różne wartości właściwości „transformacji”?

Istnieje kilka wartości tłumaczenia związanych z właściwością transformacji CSS:

• Tłumaczyć()
• translatex ()
• tłumacz ()
• tłumacz ()
• tłumacz3d ()

Sprawdź podany przykład zrozumienia ich użycia!

Przykład 1: Używanie „tłumacz ()” z właściwością „transformuj”

„„Tłumaczyć()”Funkcja przyjmuje dwie wartości parametrów. Pierwszy reprezentuje wartość osi x, a druga wartość reprezentuje oś y:

Transform: Tłumacz (100px, 100px);

Można zaobserwować, że zgodnie z określonymi wartościami element jest zmieniający się w poziomie i pionowo:

Przykład 2: Używanie „tłumaczy ()” z właściwością „transformuj”

Aby przesunąć obiekt w poziomie, użyj „translatex ()”Funkcja. W rezultacie wartość dodatnia przesunie obiekt po prawej stronie, a wartość ujemna przesunie obiekt na lewą stronę:

Transform: Translatex (100px);

Można zauważyć, że obiekt został przeniesiony 100px po prawej:

Przykład 3: Korzystanie z „Transferatey ()” z właściwością „Transform”

Aby przesunąć obiekt w pionie, użyj „tłumacz ()”Funkcja. Zgodnie z jego parametrami wartość dodatnia przesunie obiekt w kierunku dołu, a wartość ujemna przesunie go w kierunku góry:

Transform: Translatey (90px);

Wyjście

Przykład 4: Korzystanie z „tłumacz ()” z właściwością „Transform”

Translatex () i tłumacz () są dość proste do zrozumienia, ponieważ przekształcają elementy odpowiednio pod względem osi x i osi y. „„tłumacz ()„Funkcja jest jakoś trudna. Oś X i oś y poruszają element poziomo lub pionowo, podczas gdy oś Z zbliża się do obiektu lub daleko od ciebie.

Przekazanie wartości dodatniej jako parametr funkcji tłumacz ()

Możesz użyć funkcji TranslateZ () w następujący sposób:

Transform: Perspective (200px) Translatez (50px);

Tutaj:

• "perspektywiczny()”: Ta funkcja definiuje przestrzeń wirtualną między ekranem a elementem HTML.
• "tłumacz ()”: Ta dodatnia wartość w tej funkcji zbliża się do ciebie, podczas gdy wartość ujemna odsuwa element od ciebie.

Można zauważyć, że teraz obraz zbliża się do ekranu i wygląda na większe:

Przekazywanie wartości ujemnej jako parametr funkcji tłumacz ()

Teraz podajmy wartość ujemną jako parametr funkcji tłumacza ():

transformacja: perspektywa (200px) tłumacz (-50px);

Wartość ujemna przesunęła element daleko od nas:

Poruszający obiekt w kierunku 3D

Aby przesunąć obiekt w kierunku 3D, użyj „tłumacz3d ()”Funkcja. Przyjmuje wartość jako parametry osi x, osi y i osi Z. Co więcej, „perspektywiczny()„Wartość określa przestrzeń między elementem a ekranem, dzięki czemu obraz mógł poruszać się w płaszczyźnie 3D:

Transform: perspektywa (500px) tłumacz3d (150px, 30px, 130px);

Wyjście reprezentuje ruch obiektu w 3-D:

To chodziło o właściwość transformacji CSS z funkcją Translate () w CSS.

Wniosek

CSS „przekształcać„Własność o wartości”Tłumaczyć()”Umieścił elementy na osi x, osi y i osi Z. Wartości te mogą być dodatnie lub ujemne. „„translatex ()" I "tłumacz ()”Funkcje ustawione obiekty poziomo i pionowo. „„tłumacz ()”Funkcja przesuwa obiekt bliżej lub z dala od ekranu. Jest to połączone z „perspektywiczny()”Funkcja, która określa miejsce między ekranem a elementem. W tym artykule pokazano właściwość transformacji CSS z funkcją tłumacza ().