Efeito de Cartão 3D para E-books com CSS

No mundo do desenvolvimento web, a criatividade é um fator fundamental para criar experiências envolventes e atraentes para os usuários. Um dos efeitos interessantes que você pode adicionar ao seu site é o efeito de cartão 3D, que oferece uma sensação de profundidade e interatividade. Neste artigo, vamos analisar e explicar o código HTML e CSS fornecido, que cria um efeito de cartão 3D para exibir capas de e-books.

O Código HTML

<!DOCTYPE html>
<html lang="ptbr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Cards E-books</title>
</head>
<body>
    <div class="book">
        <a href=""><img src="image/capa2.jpg"></a>
        <div class="cover">
            <img src="image/capa1.jpg">
        </div>
    </div>
</body>
</html>

Estrutura do Documento

Dentro do <body>, temos um elemento <div> com a classe "book", que representa nosso cartão 3D. Este cartão contém:

Uma âncora <a> que envolve uma imagem de capa do e-book.
Um elemento <div> com a classe "cover" que envolve outra imagem de capa do e-book. Esta será a parte frontal do cartão.

O Código CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: rgb(37, 36, 36);
}

Estilos Globais

*: Seleciona todos os elementos na página.
- margin: 0; padding: 0;: Remove margens e preenchimentos padrão.
- box-sizing: border-box;: Define o modelo de caixa para incluir preenchimento e borda no cálculo da largura e altura total.
body: Estilos aplicados ao corpo da página.
- display: flex;: Aplica um modelo flex para alinhar itens vertical e horizontalmente.
- justify-content: center; align-items: center;: Centraliza os itens horizontal e verticalmente.
- min-height: 100vh;: Define a altura mínima da visualização como 100% da altura da janela.
- background: rgb(37, 36, 36);: Define a cor de fundo.

Estilos do Cartão

.book {
    position: relative;
    border-radius: 10px;
    width: 281px;
    height: 300px;
    background-color: whitesmoke;
    box-shadow: 1px 1px 12px #000;
    transform-style: preserve-3d;
    perspective: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    object-fit: cover;
}

.book: Estilos aplicados ao cartão em si.

position: relative;: Define o posicionamento relativo para posicionar os elementos internos.
border-radius: 10px;: Adiciona bordas arredondadas.
width: 281px; height: 300px;: Define as dimensões do cartão.
background-color: whitesmoke;: Define a cor de fundo do cartão.
box-shadow: 1px 1px 12px #000;: Aplica uma sombra ao cartão.
transform-style: preserve-3d;: Define o estilo de transformação 3D.
perspective: 2000px;: Define a perspectiva 3D.
display: flex; align-items: center; justify-content: center;: Centraliza os elementos internos.
color: #000;: Define a cor do texto.
object-fit: cover;: Faz com que as imagens se ajustem ao tamanho do elemento.

.cover {
    top: 0;
    position: absolute;
    background-color: lightgray;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: all 0.5s;
    transform-origin: 0;
    box-shadow: 1px 1px 12px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}

.cover: Estilos aplicados à capa frontal do cartão.

top: 0; position: absolute;: Posiciona a capa na parte superior do cartão.
background-color: lightgray;: Define a cor de fundo da capa.
width: 100%; height: 100%;: Preenche todo o espaço disponível.
border-radius: 10px;: Adiciona bordas arredondadas à capa.
transition: all 0.5s;: Adiciona uma transição suave.
transform-origin: 0;: Define o ponto de origem da transformação.
box-shadow: 1px 1px 12px #000;: Aplica uma sombra à capa.
display: flex; align-items: center; justify-content: center;: Centraliza os elementos internos.
object-fit: cover;: Faz com que a imagem se ajuste ao tamanho do elemento.

Efeito 3D ao Passar o Mouse

.book:hover .cover {
    transition: all 0.5s;
    transform: rotateY(-80deg);
}

.book:hover .cover: Quando o mouse passa sobre o cartão, a capa é afetada.

transition: all 0.5s;: Define a transição suave novamente.
transform: rotateY(-80deg);: Rotaciona a capa no eixo Y para criar o efeito 3D.

Conclusão

Neste post, exploramos um código HTML e CSS que cria um efeito de cartão 3D para exibir capas de e-books. Utilizando propriedades de posicionamento, transformação 3D e transições, conseguimos criar um efeito visualmente atraente que dá a sensação de que o cartão está girando ao ser interagido com o cursor do mouse. Você pode adaptar e personalizar esse código para criar seus próprios efeitos de cartão 3D e melhorar a experiência do usuário em seu site.