Forked from Captain Anonymous's Pen JddYoJ.
A Pen by Vageesh Dwivedi on CodePen.
<div class="container"> | |
<div class="flipper"> | |
<div class="front"></div> | |
<div class="back"></div> | |
</div> | |
</div> |
Forked from Captain Anonymous's Pen JddYoJ.
A Pen by Vageesh Dwivedi on CodePen.
.container { | |
height: 80px; | |
width: 80px; | |
} | |
.flipper { | |
position: relative; | |
display: block; | |
height: inherit; | |
width: inherit; | |
-webkit-animation: flip 2s infinite ease-in-out; | |
transform-style: preserve-3d; | |
} | |
.front, | |
.back { | |
position: absolute; | |
top: 40px; | |
left: 40px; | |
backface-visibility: hidden; | |
display: block; | |
background-color: #666; | |
height: 40px; | |
width: 40px; | |
} | |
.back { | |
background-color: #bbb; | |
z-index: 800; | |
transform: rotateY(-180deg); | |
} | |
@-webkit-keyframes flip { | |
0% { | |
transform: perspective(120px) rotateX(0deg) rotateY(0deg); | |
} | |
25% { | |
transform: perspective(120px) rotateX(-180deg) rotateY(0deg); | |
} | |
50% { | |
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); | |
} | |
75% { | |
transform: perspective(120px) rotateX(0deg) rotateY(-180deg); | |
} | |
100% { | |
transform: perspective(120px) rotateX(0deg) rotateY(0deg); | |
} | |
} |