<div class='card'>
<div class='face'>front</div>
<div class='face'>back</div>
</div>
$dim: 40vmin;
$cpv: polygon(100% 50%, 0 0, 0 100%);
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 20em;
}
div, :before {
position: absolute;
width: $dim; height: $dim;
}
.card {
top: 50%; left: 50%;
margin: -.5*$dim;
transform-style: preserve-3d;
font: calc(1em + 10vmin)/#{$dim}
trebuchet ms, verdana, arial, sans-serif;
// calc() in shorthand doesn't work in Firefox :(
// bug 1304014
font-size: calc(1em + 10vmin);
line-height: $dim;
font-family: trebuchet ms, verdana, arial, sans-serif;
animation: rot 4s ease-in-out infinite;
}
@keyframes rot {
50% { transform: rotateY(.5turn); }
100% { transform: rotateY(1turn); }
}
.face {
overflow: hidden;
backface-visibility: hidden;
-webkit-clip-path: $cpv;
clip-path: $cpv;
background: #ee8c25;
&:last-child {
transform: rotateY(.5turn);
background: #d14730;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.