CSS
html,body {
height: 100%;
}
body {
font-size: 150px;
background: linear-gradient(to left, #B24592 , #F15F79);
color: #444;
overflow: hidden;
}
body * {
position: absolute;
top: 50%;
left: 50%;
}
.box {
background: inherit;
}
.face {
width: .97em;
height: .97em;
border: .03em solid;
background: inherit;
}
@keyframes face-1 {
from {
transform: translate(-50%,-50%) rotateX(35deg) rotateY(-45deg) translateZ(0.5em) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
33% {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) translateZ(0.5em) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
to {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) translateZ(0.5em) translateY(0.5em) rotateX(-270deg) translateY(-0.5em);
visibility: visible;
}
}
.face:nth-child(1) {
z-index: 1;
animation: face-1 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes face-2 {
from {
transform: translate(-50%,-50%) rotateX(35deg) rotateY(-45deg) rotateY(90deg) translateZ(0.5em) rotate(-90deg) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
33% {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateY(90deg) translateZ(0.5em) rotate(-90deg) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
to {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateY(90deg) translateZ(0.5em) rotate(-90deg) translateY(0.5em) rotateX(-270deg) translateY(-0.5em);
visibility: visible;
}
}
.face:nth-child(2) {
z-index: 1;
animation: face-2 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes face-3 {
from {
transform: translate(-50%,-50%) rotateX(35deg) rotateY(-45deg) rotateX(90deg) translateZ(0.5em) rotate(90deg) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
33% {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateX(90deg) translateZ(0.5em) rotate(90deg) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
to {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateX(90deg) translateZ(0.5em) rotate(90deg) translateY(0.5em) rotateX(-270deg) translateY(-0.5em);
visibility: visible;
}
}
.face:nth-child(3) {
z-index: 0;
animation: face-3 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes face-4 {
from {
transform: translate(-50%,-50%) rotateX(35deg) rotateY(-45deg) rotateX(-90deg) translateZ(0.5em) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: visible;
}
33% {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateX(-90deg) translateZ(0.5em) translateY(0.5em) rotateX(0) translateY(-0.5em);
visibility: hidden;
}
to {
transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-45deg) rotateX(-90deg) translateZ(0.5em) translateY(0.5em) rotateX(-270deg) translateY(-0.5em);
visibility: hidden;
}
}
.face:nth-child(4) {
z-index: 0;
animation: face-4 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
1 Response