Como Criar Cartão 3D com Efeito Flutuante com HTML e CSS

Robson dos Santos 18/08/2025 0 Comentários Leitura: 4 min

Vamos criar um cartão 3D com efeito flutuante usando HTML e CSS! Este efeito estiloso faz com que os cartões se inclinem e se destaquem quando passados pelo mouse, dando-lhes uma aparência 3D realista que chama a atenção.

Usaremos:

HTML para estruturar o conteúdo do cartão.
CSS para estilo, sombras e animações 3D de foco usando transformações e transições.

Este projeto é perfeito para portfólios, vitrines de produtos ou qualquer design em que você queira que os elementos se destaquem com profundidade interativa. Vamos mergulhar e dar vida aos seus cartões com um efeito de foco 3D suave!

HTML

Este código HTML cria dois cards com efeito hover 3D, cada um composto por uma imagem de capa de fundo, uma imagem de título e uma imagem de personagem sobrepostas. A .carddiv envolve tudo, .wrapper contém a imagem de capa principal, e as imagens de título e personagem são posicionadas separadamente para permitir posicionamento e animações estilosos via CSS (
style.css). Quando estilizado você passar o mouse sobre um cartão você verá o elementos se destando e se movendo, criando um efeito 3D.

<!DOCTYPE html>
<html lang="eng" >
<head>
  <meta charset="UTF-8">
  <title>3D Card Hover Effect | @coding.stella</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

  <div class="card">
    <div class="wrapper">
      <img src="./Images/dark_rider-cover.jpg" class="cover-image" />
    </div>
    <img src="./Images/dark_rider-title.png" class="title" />
    <img src="./Images/dark_rider-character.webp" class="character" />
  </div>

  <div class="card">
    <div class="wrapper">
      <img src="./Images/force_mage-cover.jpg" class="cover-image" />
    </div>
    <img src="./Images/force_mage-title.png" class="title" />
    <img src="./Images/force_mage-character.webp" class="character" />
  </div>
  
</body>
</html>

CSS

Este CSS estiliza o efeito de foco do cartão 3D definindo as dimensões, o posicionamento e um fundo escuro. Cada um deles .card é usado perspectivepara criar profundidade, enquanto .wrappero mantém a imagem da capa de fundo e se inclina com sombras ao passar o mouse. Sobreposições de gradiente ( ::beforee ::after) adicionam efeitos de iluminação, e a .titleimagem se move para cima no espaço 3D ao passar o mouse. A .characterimagem começa oculta e desaparece gradualmente à medida que avança, criando a ilusão de que os elementos estão se projetando em direção ao visualizador, criando uma animação 3D dinâmica.

:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #252432;
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
  cursor: pointer;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}

.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}

Resumindo, criar um cartão 3D com efeito flutuante usando HTML e CSS é uma maneira simples, porém impressionante, de tornar seus designs interativos e modernos. Com apenas algumas linhas de código, você pode transformar cartões estáticos em elementos de interface de usuário atraentes.

Se o seu projeto apresentar problemas, não se preocupe. Basta clicar para baixar o código-fonte e encarar seus desafios de programação com entusiasmo. Divirta-se programando!

Baixar Código Fonte

banner fullstack pro - Como Criar Cartão 3D com Efeito Flutuante com HTML e CSS

Acesse nossa categoria de projetos.

Acessar os Projetos práticos

HTML

CSS

Deixe um comentário Cancelar resposta