Como fazer um cartão de flip com css

Nos sites, os cartões que viram as laterais no Hover são conhecidas como cartões flip. Uma placa de flip simples consiste em um lado da frente e uma parte traseira. No entanto, você pode usar este cartão para tornar o site atraente e divertido. O cartão flip pode ser um cartão de visita, cartão de produto, cartão de jogo, cartão de serviço ou mais.

Este artigo demonstrará o método para criar um cartão de flip com CSS.

Como fazer/criar um cartão de flip usando CSS?

Criaremos uma placa de flip que contém uma imagem na frente e suas costas compreendendo a descrição da imagem.

Etapa 1: Crie uma página HTML

Primeiro, adicione um elemento div com o nome “Flip-container”. Este contêiner segurará o cartão de flip dentro dele. Por esta:

• Adicione um elemento div e atribua um nome de classe como “flip-card”.
• Então, coloque dois elementos div com nomes de classe “Livro da fonte" e "lateral traseiro”, Respectivamente.

Como discutimos acima, o lado da frente exibirá uma imagem e o lado de trás conterá a descrição da imagem:

Baby Steps Shoes Pink

Recém -nascido - 12 meses. Baby Steps Shoe das meninas apresenta um par de sapatos modernos, leves e confortáveis ​​com uma sola macia.

Vamos aplicar propriedades de estilo CSS ao código acima mencionado.

Etapa 2: estilo “Flip-container” div

.Flip-container
Posição: relativa;
Largura: 300px;
Altura: 300px;
margem: automático;

O contêiner Flip é estilizado com as seguintes propriedades CSS:

• ““posição”A propriedade é utilizada para o cenário da posição do elemento. O valor que "relativo”Posiciona o elemento em relação à sua posição normal.
• ““altura”Propriedade define a altura do elemento HTML selecionado.
• ““largura”Propriedade significa sua largura.
• ““margem”O valor da propriedade indica o espaço ao redor do elemento adicionado.

Etapa 3: Div "Flip-Card" Style "Flip"

.flip-card
Posição: Absoluto;
largura: 100%;
Altura: 100%;
estilo de transformação: preservação-3d;
transição: tudo 0.5s facilidade;

O "flip-card”O elemento Div é estilizado usando as seguintes propriedades CSS:

• ““posição”Propriedade com o valor“absoluto”Posiciona o elemento em relação ao seu elemento pai posicionado.
• ““estilo de transformação”A propriedade é utilizada para definir o espaço de seus elementos filhos planos ou 3D. O valor que "preservação-3d”Especifica o espaço 3D de seus filhos.
• ““transição”Propriedade com o valor“tudo 0.5s facilidade" indica que "todos”As propriedades são aplicadas com a duração da transição de“0.5s”. O valor que "facilidade”Especifica o efeito de transição para começar tão lento, depois rápido e depois voltar para lentamente.

Etapa 4: Estilo “Side frontal” e elementos de divindades

.lateral da frente,
.lateral
Posição: Absoluto;
largura: 100%;
Altura: 100%;
Visibilidade da backface: Hidden;

Para esconder a face dos fundos do “lateral traseiro”Div e também o“lateral da frente”Div elemento, use o“visibilidade da backface"Com o valor"escondido”.

Etapa 5: Div, estilo “back-side”

.lateral
Antecedentes: Darkcyan;
Cor: #FFF;
Radio de fronteira: 5px;
Alinhamento de texto: centro;
Size da fonte: 25px;
Transform: giratey (180deg);

O "lateral traseiro”O elemento div possui as seguintes propriedades CSS:

• ““fundo”Propriedade define a cor de fundo do elemento.
• ““cor”Propriedade define a cor da fonte do elemento.
• ““Radio de fronteira”Propriedade faz as bordas do elemento redondo.
• ““tamanho da fonte”A propriedade é utilizada para especificar o tamanho da fonte do elemento.
• ““alinhamento de texto”O valor da propriedade representa o estilo de alinhamento do texto adicionado.

Então, a parte de trás do cartão ficará assim:

Quando passamos o mouse sobre o recipiente do cartão, queremos que o cartão gire 180 graus, revelando o lado de trás e escondendo a parte da frente. Então, vamos girar o lado de trás, utilizando o CSS “transformar" propriedade.

• ““transformar”A propriedade é utilizada para definir a transformação do elemento em torno das ordenadas. O valor que "Rotatey (180DEG)”Girará o elemento 180 graus ao redor do eixo y.

Aqui está o nosso cartão de flip:

Por fim, vá para adicionar o efeito pairar ao cartão.

Etapa 6: estilo “flip-card” div em pairar

.Flip-container: Passe o mouse .flip-card
Transform: giratey (180deg);

O ".Flip-container: Passe o mouse”Refere-se ao efeito pairar no Flip-container. Quando o mouse paira sobre o “Flip-container”Div, o“flip-cardDiv também girará 180 graus. Para fazer isso, o CSS “transformar”Propriedade com o valor“Rotatey (180DEG)”É utilizado.

Então, aqui está o resultado final:

Isso se tratava de fazer um cartão de flip com CSS.

Conclusão

O cartão flip é o componente decorativo comum utilizado em qualquer aplicativo da web. Este cartão contém lados dianteiros e traseiros. No mouse, ele vira e muda continuamente seus lados. Este efeito de flip é adicionado a ele utilizando o “transformar”Propriedade com o valor“giratey ()”Função. Este post demonstrou o procedimento para fazer um cartão de flip com CSS.