Effet tiroir

1,871 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 September 2025

Effet d'animation CSS Circle Glow

21 July 2025

Écran TV HTML avec intégration et effets YouTube

16 October 2025

Écran de chargement animé CSS avec effet de code

HTML

CSS

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

body {
  height: 100vh;
  width: 100vw;
  font-family: "Monaco";
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-bottom: 50px;
}

.drawer_wrapper {
  height: 100px;
  width: 500px;
  position: relative;
  border-radius: 10px;
}

.layer {
  position: absolute;
  inset: 0;
  transition: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 10px;
  transform-origin: bottom;
}

.info {
  position: absolute;
  padding: 10px;
  color: white;
  font-weight: lighter;
  inset: 0;
  height: 100%;
  width: 100%;
  font-size: 0.5rem;
}

.drawer_wrapper:hover .layer_5 {
  transform: perspective(70rem) rotateX(-45deg);
  transition-delay: 0ms;
  box-shadow: 0px -5px 8px 0px #00000026;
}
.drawer_wrapper:hover .layer_4 {
  transform: perspective(70rem) rotateX(-35deg);
  transition-delay: 70ms;
  box-shadow: 0px -2px 4px 0px #b9310053;
}
.drawer_wrapper:hover .layer_3 {
  transform: perspective(70rem) rotateX(-25deg);
  transition-delay: 100ms;
}
.drawer_wrapper:hover .layer_2 {
  transform: perspective(70rem) rotateX(-15deg);
  transition-delay: 150ms;
}
.drawer_wrapper:hover .layer_1 {
  transform: perspective(70rem) rotateX(-5deg);
  transition-delay: 200ms;
}
.drawer_wrapper:hover .handle {
  background-color: #c33a08;
}

.layer_1 {
  background-color: salmon;
  z-index: 1;
}

.layer_2 {
  background-color: skyblue;
  z-index: 2;
}

.layer_3 {
  background-color: orange;
  z-index: 3;
}

.layer_4 {
  background-color: orangered;
  z-index: 4;
}

.layer_5 {
  background-color: black;
  z-index: 5;
  cursor: pointer;
}

.handle {
  position: absolute;
  height: 7px;
  width: 50px;
  border: 2px solid white;
  border-radius: 10px;
  left: 50%;
  bottom: 40%;
  transform: translate(-50%, -50%);
  background-color: orangered;
  transition: 200ms ease;
}