.cube
- 6.times do
.cube__face
$edge-len-landscape: 20vw;
$edge-len-portrait:
$edge-len-landscape*1vh/1vw;
$url: $base + 'cat_pumpkin_1.jpg';
$img-size: 374px;
$ratio: $edge-len-landscape/100vw;
$mq-val: $img-size/$ratio;
body {
height: 100vh;
perspective: 40em;
background: silver;
}
div { position: absolute; }
.cube {
top: 50%; left: 50%;
transform-style: preserve-3d;
animation: rot 8s linear infinite;
&__face {
width: $edge-len-landscape;
height: $edge-len-landscape;
min-width: $edge-len-portrait;
min-height: $edge-len-portrait;
@for $i from 0 to 6 {
&:nth-child(#{$i + 1}) {
transform: translate(-50%, -50%)
if($i < 4, rotateY($i*90deg),
rotateZ(pow(-1, $i)*90deg))
translateX(50%) rotateY(90deg);
}
}
/* set a background so we can see it */
box-shadow: inset 0 0 0 1px #fff;
opacity: .5;
background: url($url) 50% no-repeat #000;
@media (max-width: $mq-val),
(max-height: $mq-val) {
background-size: contain;
}
}
}
@keyframes rot {
to {
transform: rotateY(1turn) rotate(1turn);
}
}
Also see: Tab Triggers