<input id="manual" type="checkbox"> <label for="manual">Interactive mode (mouse hover)</label>
<div class="cube" id="red">
<div class="face">R</div>
<div class="face">r</div>
</div>
<div class="cube" id="green">
<div class="face">G</div>
<div class="face">g</div>
</div>
<div class="cube" id="blue">
<div class="face">B</div>
<div class="face">b</div>
</div>
body, html {
height: 100%;
color: #fff;
}
body {
font: bold 90%/1.2 Arial;
perspective: 500px;
background: #000;
text-align: center;
}
/* cube */
.cube {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 150px;
height: 150px;
line-height: 150px;
text-align:center;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.face {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
background-position: 0 100%;
background-size: 100% 400%;
backface-visibility: hidden;
transition: background-position 1s;
font-size: 600%;
color: #000;
}
/* transform the faces and use a big grad for shading */
.face:first-child {
transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
background-image: linear-gradient(rgba(0,0,0,1) 10%, rgba(0,0,0,0) 66%);
}
.face:last-child {
transform: translateY(50%) rotateX(-90deg) ;
background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,1) 90%);
}
/* some test candidates */
#red {
left: 25%;
}
#red .face {
background-color: #c33;
}
#green {
left: 50%;
z-index: 1;
}
#green .face {
background-color: #ad3;
}
#blue {
left: 75%;
}
#blue .face {
background-color: #3ac;
}
/* use the checkbox to toggle manual / autoplay */
/* auto-play */
#manual:not(:checked) ~ .cube {
animation: rotate 1s alternate infinite ease-in-out;
}
#manual:not(:checked) ~ .cube .face {
animation: shade 1s alternate infinite ease-in-out;
}
@keyframes rotate {
to { transform: translateZ(-100px) rotateX(90deg); }
}
@keyframes shade {
to { background-position: 0 0 }
}
/* hover to animate */
#manual:checked ~ .cube:hover {
transform: translateZ(-100px) rotateX(90deg);
}
#manual:checked ~ .cube:hover > .face:first-child,
#manual:checked ~ .cube:hover > .face:last-child {
background-position: 0 0
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.