.container
.mover
- 6.times do
.face
View Compiled
$l: 5em;
body { margin: 0; }
.container {
height: 100vh;
perspective: 20em;
background: linear-gradient(#1c9edc 50%,
#a048b9 0) 100% / 50% 100% no-repeat,
linear-gradient(#ee8c25 50%,
#d14730 0);
font-size: 5vmin;
}
.mover {
position: absolute;
top: 50%; left: 50%;
transform-style: preserve-3d;
mix-blend-mode: overlay;
animation: r 5s linear infinite;
}
.face {
position: absolute;
margin: -.5*$l;
width: $l; height: $l;
border-radius: 50%;
background: url(http://www.followmefoodie.com/wp-content/uploads/2011/09/pies-blackberry-l.jpg) 50%/ 134%;
@for $i from 0 to 6 {
&:nth-child(#{$i + 1}) {
transform: if($i < 4, rotateY($i*90deg),
rotateX(pow(-1, $i)*90deg))
translateZ(.5*$l)
}
}
}
@keyframes r {
0% { transform: rotate(0turn) translate($l) rotateX(0turn) }
to { transform: rotate(1turn) translate($l) rotateX(1turn) }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.