Hoe te maken: 3D omdraaiende doos

Leer hoe je een omdraaiende doos maakt met CSS.

Hoe een omdraaiende doos te maken

Eerste stap - Voeg HTML toe:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

Second step - Add CSS:

/* Flip box container - set the desired width and height. We added the border attribute to demonstrate, the flip itself will extend beyond the box when the mouse hovers over it (if you do not want 3D effect, please delete perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this line if 3D effect is not needed */
}
/* This container is used to position the front and back */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Perform a horizontal flip when the mouse moves over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Position the front and back */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Set the style of the front */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Set the style of the back */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Try it yourself

Vertical flip

To perform a vertical flip instead of a horizontal flip, please use rotateX method instead of rotateY:

Example

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Try it yourself

Note:These examples may not work properly on tablets and/or mobile phones.

Gerelateerde pagina's

Handleiding:CSS 2D transformatie

Handleiding:CSS 3D transformatie