Effet de carte Flips 3D

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 April 2025

système de dons avec plusieurs montants

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);
}

Effet de carte Flips 3D

Recommandé

un code de metehan

Un code de Metehan

système de dons avec plusieurs montants

HTML

CSS

JS

Recommandé

un code de metehan

Un code de Metehan

système de dons avec plusieurs montants

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS