3D Flipbox Test « The Cyber Sandbox

<div class="flipbox">
  <div class="front">
    <h4>This is the front of a flip box!...</h4>
  </div>
  <div class="back">
    <p>This is the back of the very same flip box!...</p>
  </div>
</div>

This is the front of a flip box! Hover me to see more...

This is the back of the very same flip box! Isn't that neat? Science truly has gone too far, and mankind is to blame for the death of God.

/*-- CSS USED --*/

.flipbox {
display: block;
height: 300px;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
max-width: 450px;
width: 100%;
margin: 0 auto;
cursor: pointer;
}

.flipbox > div {
height: 275px;
display: grid;
max-width: 450px;
align-content: center;
text-align: center;
padding: 30px;
position: absolute;
top: 0;
border-radius: 5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.flipbox .front {
background: var(--highlight-color);
z-index: 1;
-webkit-transform: none;
transform: none;
}

.flipbox .back {
background: var(--alt-color);
z-index: 0;
-webkit-transform: rotateX(180deg) rotateY(0);
transform: rotateX(180deg) rotateY(0);
}

.flipbox .front h4 {
color: white;
font-size: 24px;
line-height: 1.3em;
}

.flipbox .back p {
font-size: 18px;
line-height: 1.5em;
}

.flipbox:hover .front {
z-index: 0;
-webkit-transform: rotateX(-180deg) rotateY(0);
transform: rotateX(-180deg) rotateY(0);
}

.flipbox:hover .back {
z-index: 1;
-webkit-transform: none;
transform: none;
}