Jak zastosować wiele transformacji w CSS?

Obrazy są niezbędne do wyrażania informacji i poprawy wyglądu strony internetowej. Te grafiki HTML są wykorzystywane do tworzenia przyciągających wzrok wizualizacji, w tym reklam banerowych, rysunków i innych. Czasami jednak konieczne jest obracanie lub odwrócenie zdjęć na stronie, aby dopasować określone wymagania wizualne dla firmy. W tym celu CSS pozwala użytkownikom zastosować wiele „przekształcać”Właściwości na elementach HTML.

Ten zapis będzie pokazany:

• Jak dodać/ wstawić obraz do div?




• Jak zastosować wiele transformacji w CSS?

Jak wstawić obraz do div?

Aby dodać/wstawić obraz do div, wypróbuj wspomnianą procedurę.

Krok 1: Utwórz kontener Div

Najpierw utwórz kontener DIV, wykorzystując „”Tag. Następnie wstaw „„ID”Z konkretną nazwą.

Krok 2: Zrób inny kontener DIV

Następnie stwórz kolejny kontener DIV. Dodaj także atrybut klasy w znaczniku DIV i określ nazwę klasy.

Krok 3: Dodaj obraz

Dodaj obraz za pomocą „”Oznacz i dodaj następujące wymienione atrybut w następujący sposób:

• "src”Jest wykorzystywany do dodawania ścieżki obrazu wewnątrz elementu.
• "wysokość„Właściwość jest wykorzystywana do określenia wysokości zdefiniowanego elementu.
• "szerokość„Właściwość określa rozmiar elementu w poziomie:

Można zauważyć, że obraz został pomyślnie dodany w pojemniku:

Teraz przejdź do następnej sekcji, aby zastosować wiele transformacji na obrazach w CSS.

Jak zastosować wiele transformacji w CSS?

„„przekształcać„Właściwość w CSS służy do modyfikacji przestrzeni współrzędnych modelu formatowania wizualnego. Dodatkowo jest wykorzystywany do stosowania różnych efektów do wybranych elementów, takich jak rotacja, tłumaczenie i skoś. Wypróbuj szczegółowe instrukcje dotyczące stosowania licznych transformacji w CSS.

Aby zastosować wiele transformacji w CSS, użytkownik musi wypróbować następujące kroki.

Krok 1: Dostęp do pierwszego div

#img-transform
Text-Align: Center;

Uzyskaj dostęp do pierwszego kontenera Div za pomocą selektora o nazwie identyfikatora „#img-transform". Aby to zrobić, „tekst-align„Własność jest wykorzystywana do wyrównania kontenera Div zgodnie z konkretną wartością.

Krok 2: Zastosuj pierwszą transformację

Uzyskaj dostęp do drugiego kontenera Div za pomocą selektora kropki i nazwy klasy jako „.Pierwsze zamówienie". Następnie zastosuj „przekształcać„Własność do wybranej klasy:

.Pierwsze zamówienie
Transform: Rotate (90DEG) Translat (135px, 180px);

Według danego fragmentu kodu:

• „„przekształcać„Własność jest wykorzystywana do zastosowania transformacji 2D lub 3D na zdefiniowanym elemencie. Ta właściwość pozwala użytkownikowi na obracanie, skalowanie, przemieszczanie i wypaczenie elementów.
• „„obracać się()„Wartość właściwości transformacji jest funkcją w CSS, która obraca element zgodnie z określoną wartością.
• „„Tłumaczyć()”Metoda przesuwa element z jego bieżącej pozycji (zgodnie z parametrami podanymi dla osi X i osi Y).

Wyjście

Krok 3: Zastosuj drugą transformację

Teraz ponownie uzyskaj dostęp do drugiego kontenera Div i zastosuj następujące wymienione właściwości wymienione poniżej:

.Pierwsze zamówienie
Rozmiar tła: zawiera;
Transform: Rotate (-150DEG);
Margines: 100px;

Tutaj:

• „„Rozmiar tła”Właściwość ustala zastępowanie domyślnego zachowania kafelki obrazu i pozwala użytkownikowi wybrać rozmiar obrazu tła elementu.

• A później "przekształcać„Właściwość jest wykorzystywana do przekształcania obrazu według warunków.
• Następny, "margines„Przydziela przestrzeń poza zdefiniowaną granicą.

Wyjście

Chodziło o stosowanie wielu transformacji w CSS.

Wniosek

Aby zastosować wiele transformacji w CSS, najpierw utwórz pojemnik Div ​​z „„Tag i dodaj identyfikator wewnątrz znacznika div. Następnie utwórz kolejny kontener DIV i wstaw klasę o określonej nazwie. Następnie uzyskaj dostęp do Div i zastosuj „przekształcać„Właściwość CSS i ustaw wartość”Obrócić (90)" stopień. Następnie ponownie powtórz tę samą procedurę stosowania drugiej transformacji. W tym poście wyjaśniono metodę stosowania wielu transformacji w CSS.