<div class='cube'>
<div class='flip'>
<p>Front</p>
</div>
<div class='flop'>
<p>XXX</p>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
background: hsl(222,50%,95%);
color: white;
padding: 3em 0 0 0;
line-height: 62px;
margin: auto;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 100px;
text-align: center;
margin: 0 auto;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
height: 100px;
}
.flip,.flop {
border: 2px solid black;
background: #3d405b;
width: 100px;
height: 100px
}
.flip {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
position:absolute;
}
.flop {
-webkit-transform: rotateY(90deg) translateZ(-50px);
transform: rotateY(90deg) translateZ(-50px);
}
/* rotation */
.cube:hover {
-webkit-transform: rotateY(89deg);
transform: rotateY(89deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.