Jak zrobić kartę Flip z CSS

Na stronach internetowych karty, które odwracają swoje boki na zawisie, są znane jako karty Flip. Prosta karta Flip składa się z przedniej strony i tyłu. Możesz jednak użyć tej karty, aby witryna była atrakcyjna i zabawna. Karta Flip może być wizytówką, kartą produktu, kartą gry, karty serwisowej lub więcej.

W tym artykule pokazuje metodę tworzenia karty Flip z CSS.

Jak zrobić/utworzyć kartę Flip za pomocą CSS?

Utworzymy kartę Flip, która zawiera obraz z przodu, a jego wstecz obejmuje opis obrazu.

Krok 1: Utwórz stronę HTML

Najpierw dodaj element DIV z nazwą „Flip-Container". Ten pojemnik pomieści w sobie kartę klapki. Dla tego:

• Dodaj element div i przypisz go nazwa klasy jako „Flip-Card".
• Następnie umieść dwa elementy DIV z nazwami klas „po stronie czcionki" I "tyłek”Odpowiednio.

Jak omówiliśmy powyżej, przednia strona wyświetli obraz, a tylna strona będzie zawierać opis obrazu:

Baby Steps Buty różowe

Noworodek - 12 miesięcy. Baby Steps Buts 'But ma modną, ​​lekką, wygodną parę butów z miękką podeszwą.

Zastosujmy właściwości stylizacji CSS do wyżej wymieniony kod.

Krok 2: Style „Flip-Container” Div

.flip-container
Pozycja: względny;
szerokość: 300px;
Wysokość: 300px;
Margines: Auto;

Pojemnik Flip jest stylizowany z następującymi właściwościami CSS:

• "pozycja„Własność jest wykorzystywana do ustawienia pozycji elementu. Wartość "względny”Pozycjonuje element względem jego normalnej pozycji.
• "wysokość„Właściwość określa wysokość wybranego elementu HTML.
• "szerokość„Własność oznacza jej szerokość.
• "margines”Wartość właściwości wskazuje przestrzeń wokół dodanego elementu.

Krok 3: Style „Flip-Card” Div

.Flip-Card
Pozycja: absolutna;
szerokość: 100%;
Wysokość: 100%;
Transform Style: Reserve-3d;
przejście: wszystkie 0.5s łatwość;

„„Flip-Card„Element DIV jest stylizowany przy użyciu następujących właściwości CSS:

• "pozycja„Własność o wartości”absolutny”Pozycjonuje element względem jego pozycjonowanego elementu nadrzędnego.
• "Transform w stylu„Nieruchomość jest wykorzystywana do ustawiania przestrzeni elementów dziecięcych płasko lub 3D. Wartość "Zachowaj-3d”Określa przestrzeń 3D swoich dzieci.
• "przemiana„Własność o wartości”Wszystkie 0.5s łatwość”Wskazuje, że„Wszystko„Właściwości są stosowane z czasem przejściowym„0.5s". Wartość "łatwość”Określa efekt przejścia, aby zacząć jako powolny, a następnie szybko, a następnie wróć do powolności.

Krok 4: Stylowe elementy Div „Front Strona” i „tylna strona”

.przedni,
.tył
Pozycja: absolutna;
szerokość: 100%;
Wysokość: 100%;
Wspomagalność Backface: ukryta;

Ukryć tylną twarz „tyłek”Div, a także„ „przedni”Element DIV, użyj„Wspomagalność Backface”Z wartością„ukryty".

Krok 5: styl „tylna” div

.tył
Tło: Darkcyan;
kolor: #fff;
RADIUS BERDER: 5px;
Text-Align: Center;
Rozmiar czcionki: 25px;
Transform: Rotatey (180Deg);

„„tyłek”Element DIV posiada następujące właściwości CSS:

• "tło”Właściwość ustawia kolor tła elementu.
• "kolor”Właściwość ustawia kolor czcionki elementu.
• "Radiusz graniczny„Właściwość sprawia, że ​​krawędzie elementu jest okrągłe.
• "rozmiar czcionki„Właściwość jest wykorzystywana do określenia rozmiaru czcionki elementu.
• "tekst-align„Wartość właściwości reprezentuje styl wyrównania dodanego tekstu.

Tak więc tylna strona karty będzie wyglądać tak:

Kiedy unosimy się nad pojemnikiem kart, chcemy, aby karta obróciła się o 180 stopni, odsłaniając tylną stronę i ukrywając przednią stronę. Więc obróćmy tylną stronę, wykorzystując CSS ”przekształcać" nieruchomość.

• "przekształcać„Właściwość jest wykorzystywana do ustawienia transformacji elementu wokół rzędnych. Wartość "Rotatey (180Deg)”Obróci element o 180 stopni wokół osi y.

Oto nasza karta Flip:

Wreszcie, udaj się, aby dodać efekt zawisu do karty.

Krok 6: Styl „Flip-Card” Div on Elow

.Flip-Container: Elover .Flip-Card
Transform: Rotatey (180Deg);

„„.Flip-Container: Elover”Odnosi się do efektu zawisowego na odwrotnie. Kiedy mysz unosi się nad „Flip-Container”Div,„Flip-Card”Div również obróci się o 180 stopni. Aby to zrobić, CSS ”przekształcać„Własność o wartości”Rotatey (180Deg)”Jest wykorzystywany.

Oto końcowy wynik:

Chodziło o tworzenie karty Flip z CSS.

Wniosek

Karta Flip jest wspólnym elementem dekoracyjnym używanym w dowolnej aplikacji internetowej. Ta karta zawiera przednie i tylne strony. Na zawisie, odwraca się i ciągle zmienia swoje strony. Ten efekt odwrotny jest do niego dodawany, wykorzystując „przekształcać„Własność o wartości”Rotatey ()”Funkcja. Ten post wykazał procedurę tworzenia karty Flip z CSS.