Efecto de tarjeta volteada 3D

3,007 Andev.web

Abrir en el editor Publica tu código

Recomendado

21 April 2026

cueva del tsunami

27 May 2025

Un código de mironovbogdan341

14 January 2026

Clon del juego JavaScript de Geometry Dash

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Andev Web</title>

<div class="card-back">
          <div class="back-title">The Flash</div>
          <div class="movie-description">
            <span>Synopsis: </span>The Flash travels through time to prevent the murder of his mother, but unwittingly causes changes that result in the creation of a multiverse.
          </div>
          <div class="genre">
            <span>Genre: </span>Action, Adventure, Sci-Fi
          </div>
          <div class="release-date">
            <span>Release Date: </span>16 June, 2023
          </div>
          <a href="https://www.youtube.com/watch?v=hebWYacbdvc" class="btn">Watch Trailer</a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

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

body {
  font-family: "Poppins", sans-serif;
  background-color: #061519;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: 400px;
}

.card-content {
  position: relative;
  padding: 15rem 5rem;
  transform-style: preserve-3d;
  transition: transform 3s;
}
.card:hover .card-content {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.card-front,
.card-back {
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  color: white;
}
.card-front {
  background-image: url(https://i.pinimg.com/564x/15/dc/30/15dc30af29194fa3b91e9de015eb646b.jpg);
  background-color: rgba(255, 163, 42, 0.2);
  align-items: center;
}
.card-front::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 3px solid yellow;
  transform: translateZ(2rem);
}
.title {
  font-family: "Teko", sans-serif;
  font-size: 4.5rem;
  text-transform: uppercase;
  line-height: 120%;
  transform: translateZ(4.4rem);
}
.sub-title {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  transform: translateZ(3rem);
}

.card-back {
  background-image: url(https://revolucaonerd.com/wordpress/wp-content/files/revolucaonerd.com/2023/04/debc5663843e871893f7da710a29213a.jpg);
  transform: rotateY(180deg);
  gap: 0.5rem;
}
.back-title {
  font-family: "Teko", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: yellow;
  text-transform: uppercase;
  align-self: center;
  transform: translateZ(2rem);
}

.card-back span {
  font-weight: 600;
  color: yellow;
}
.btn {
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 2.2rem;
  color: yellow;
  border: 2px solid white;
  border-radius: 100px;
  text-align: center;
  align-self: center;
  margin-top: 1rem;
  transform: translateZ(2rem);
  transition: 0.3s ease;
}
.btn:hover {
  background-color: rgb(185, 164, 0);
  color: white;
  border: 2px solid rgb(185, 164, 0);
}