CSS Efeito Flip Card

Criando um flip card usando apenas HTML e CSS3. O processo é super simples. Os cartões flip são grandes poupadores de espaço para o conteúdo do site e podem aumentar muito a experiência do usuário online. O trecho de código para este tutorial está nos comentários.

[@nedsonsilva8906]

\\\\\\\\\ HTML |\\\\\\\\\\

Document

FRONT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis illum quis fugit in eligendi praesentium et tempora nulla, ipsam voluptates saepe odit hic enim similique sint nobis libero cumque ullam?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto suscipit maiores quo eum, fuga odio, iure deleniti tempora quae magni pariatur aspernatur beatae vel accusantium quod id, eveniet laudantium quidem!
BACK
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque et qui accusamus? Quidem, doloremque, expedita et molestiae natus architecto veniam sint sit voluptatem nemo, reiciendis quis blanditiis. Consequuntur, officiis praesentium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem totam quos, quis cum expedita pariatur earum nam fugiat ullam dolorum, exercitationem excepturi voluptas mollitia veniam architecto officia aliquid maiores modi!

CSS |\\\\\\\\\\\\\\\\\
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
background: #000;
}
section {
width: 500px;
margin: 50px auto;
}
.face {
width: 400px;
height: 300px;
perspective: 700px;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
border-radius: 10px;
transition: 700ms;
}
.front {
background: limegreen;
z-index: 1;
}
.back {
background: lightslategray;
transform: rotateY(-180deg);
backface-visibility: hidden;
}
.face:hover .front {
transform: rotateY(180deg);
z-index: 0;
}
.face:hover .back {
transform: rotateY(0);
z-index: 1;
}

[@user-qy6hq3xn1t]

Gênio

[@andremacchione1816]

Muito obrigado! Mais simples que outras formas apresentadas por muito vendedor de curso por aí

[@joaopedrocardoso3764]

Ótimo conteúdo, parabéns!

[@CleciusKleberOficial]

mt bom, parabens pelo video, me deu um norte mt bom
sucesso

[@carmenlucia9896]

Parabéns! Ótima explicação👏👏 Ganhou mais uma inscrita, você me ajudou muito. Gratidão!

[@miqueiasbraga8201]

Top de + !

[@iasmindias6353]

MUITO OBRIGADA

[@nedsonsilva8906]

Olá Iasmin, q bom p pude ajudar.

[@viniciusnunes8999]

Acabei de conhecer o canal e já adorei

[@nedsonsilva8906]

Que bom. Logo logo postarei mais vídeos

[@vicby3372]

muito obrigado amigo! aprendi várias coisas novas❤️

[@nedsonsilva8906]

Que bom saber, amg. Logo logo postarei mais vídeos.
Se tiver alguma sugestão?

[@vicby3372]

@@nedsonsilva8906 se possível um exemplo de um menu responsivo, 🖖🏻❤️

[@nedsonsilva8906]

@@vicby3372 Opa, anotado

[@ThePrikasouza]

Muito bom.

[@marceloportinneli996]

Olá amigo. Novo inscrito aqui. Poderia trazer um Vídeo como faz esse mesmo processo Só que em XML por favor. Ou não é possível fazer em XML . Sou meio leigo sobre o Assunto. Se Puder responder meu comentário ficaria grato.

[@CleciusKleberOficial]

Amigo, pergunta, eu usei essa aula pra fazer vários cards de serviço, mas agr tô tendo dificuldade em centralizar tudo, como fazer?

[@matheusbrenno5941]

como faço pra adicionar mais cads ao Lado?

[@JoelsonMedeiros]

aí você adiciona mais divs e declara a propriedade display como inline.block. Assim as divs ficam uma ao lado da outra. Só colocar as propriedade CSS que o nosso amigo aí explicou no video para cada div que vai funcionar. Mas como teu comentário já tem 4 meses, acredito que vc já deva saber disso hahahaha