HTML
<div class="scene">
<div class="cube">
<div class="side back">
<div class="guides"></div>
<span>BACK</span>
</div>
<div class="side top">
<div class="guides"></div>
<span>TOP</span>
</div>
<div class="side bottom">
<div class="guides"></div>
<span>BOTTOM</span>
</div>
<div class="side front">
<div class="guides"></div>
<span>FRONT</span>
</div>
</div>
</div>
CSS
.scene {
width: 300px;
height: 300px;
margin: 100px auto 0;
perspective: 1200px;
}
.cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: translateZ(-150px) rotateX(0deg);
animation: example 15s linear infinite;
}
.side {
position: absolute;
width: 300px;
height: 300px;
box-sizing: border-box;
background-color: #999;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 120px 0;
font: 50px/1 'Trebuchet MS', sans-serif;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.side::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
}
.side span {
position: relative;
display: block;
}
.back span {
animation: back 15s linear infinite;
}
.top span {
animation: top 15s linear infinite;
}
.bottom span {
animation: bottom 15s linear infinite;
}
.front span {
animation: front 15s linear infinite;
}
.guides {
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100%;
border-style: dotted;
border-width: 0 1px;
color: rgba(255, 255, 255, 0.6);
}
.guides::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-left: 1px dotted;
}
.back {
transform: translateZ(-150px) rotateX(180deg);
}
.top {
transform: translateY(-150px) rotateX(90deg);
}
.bottom {
transform: translateY(150px) rotateX(270deg);
}
.front {
transform: translateZ(150px);
}
.back {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/back.jpg);
}
.top {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/top.jpg);
}
.bottom {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/bottom.jpg);
}
.front {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/front.jpg);
}
@keyframes example {
0% { transform: translateZ(-150px) rotateX(0deg); }
15% { transform: translateZ(-150px) rotateX(90deg); }
25% { transform: translateZ(-150px) rotateX(90deg); }
40% { transform: translateZ(-150px) rotateX(180deg); }
50% { transform: translateZ(-150px) rotateX(180deg); }
65% { transform: translateZ(-150px) rotateX(270deg); }
75% { transform: translateZ(-150px) rotateX(270deg); }
90% { transform: translateZ(-150px) rotateX(360deg); }
100% { transform: translateZ(-150px) rotateX(360deg); }
}
@keyframes front {
0% { transform: translateY(0px) }
15% { transform: translateY(-100px); }
25% { transform: translateY(-100px); }
40% { transform: translateY(0px); }
50% { transform: translateY(0px); }
65% { transform: translateY(100px); }
75% { transform: translateY(100px); }
90% { transform: translateY(0px); }
100% { transform: translateY(0px); }
}
@keyframes bottom {
0% { transform: translateY(100px) }
15% { transform: translateY(0px); }
25% { transform: translateY(0px); }
40% { transform: translateY(-100px); }
50% { transform: translateY(-100px); }
65% { transform: translateY(0px); }
75% { transform: translateY(0px); }
90% { transform: translateY(100px); }
100% { transform: translateY(100px); }
}
@keyframes back {
0% { transform: translateY(0px) }
15% { transform: translateY(100px); }
25% { transform: translateY(100px); }
40% { transform: translateY(0px); }
50% { transform: translateY(0px); }
65% { transform: translateY(-100px); }
75% { transform: translateY(-100px); }
90% { transform: translateY(0px); }
100% { transform: translateY(0px); }
}
@keyframes top {
0% { transform: translateY(-100px) }
15% { transform: translateY(0px); }
25% { transform: translateY(0px); }
40% { transform: translateY(100px); }
50% { transform: translateY(100px); }
65% { transform: translateY(0px); }
75% { transform: translateY(0px); }
90% { transform: translateY(-100px); }
100% { transform: translateY(-100px); }
}
