Films de cartes CSS pures 3D

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

27 June 2025

CSS

.card {
  width: calc(300px / 1.5);
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
    margin-left: 15px;
    margin-bottom: 8px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.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 {
    height: 285px;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}
.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -2%, 100px);
}
.bartar-seton {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    padding: 150px 0 27px;
}

Films de cartes CSS pures 3D

Recommandé

Un code de Mete

Un code par yuhhxn

Effet de carte Flips 3D

HTML

CSS

JS

Recommandé

Un code de Mete

Un code par yuhhxn

Effet de carte Flips 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS