$scene-width: 70vmin;
$scene-depth: 70vmin;
$scene-height: 20vmin;
$leg-rot-speed: 0.3s;
$color-white: #E4DDB7;
$color-black: #060B21;
$color-lightbrown: #C8834F;
$color-darkbrown: #783D2A;
@mixin box($width, $height, $depth, $color) {
width: $width;
height: $height;
.container {
position: relative;
width: 100%;
height: 100%;
* {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.left {
width: $depth;
height: $height;
background-color: $color;
transform-origin: left top;
transform:
rotateY(-90deg)
translateX($depth / -2);
}
.right {
width: $depth;
height: $height;
background-color: $color;
transform-origin: left top;
transform:
rotateY(90deg)
translateX($depth / -2)
translateZ($width);
}
.top {
background-color: lighten($color, 5%);
width: $width;
height: $depth;
transform-origin: bottom left;
transform:
rotateX(90deg)
translateY($depth / 2)
translateZ($height);
}
.bottom {
background-color: lighten($color, 5%);
width: $width;
height: $depth;
transform-origin: bottom left;
transform:
rotateX(-90deg)
translateY($depth / 2);
}
.front {
background-color: darken($color, 8%);
width: $width;
height: $height;
transform-origin: bottom left;
transform:
translateZ($depth / 2);
}
.back {
background-color: darken($color, 8%);
width: $width;
height: $height;
transform-origin: center;
transform:
rotateY(180deg)
translateZ($depth / 2)
rotateX(180deg)
rotateZ(180deg);
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-image:
radial-gradient(#333, #0a0a0a);
overflow: hidden;
perspective: 1000px;
.scene, .scene * {
transform-style: preserve-3d;
}
.scene {
position: relative;
width: $scene-width;
height: $scene-height;
transform:
rotateX(-20deg)
rotateY(50deg);
animation: rot 30s ease-in-out 0s infinite alternate;
@keyframes rot {
to {
transform:
rotateX(0deg)
rotateY(440deg);
}
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -100;
transform:
rotateX(90deg)
scale(1.0);
}
.cube, .cube *, .lion, .lion * {
position: absolute;
bottom: 0;
}
#ground {
z-index: -50;
$width: $scene-width;
$height: 3vmin;
$depth: $scene-depth;
$color: darken($color-lightbrown, 15%);
@include box($width, $height, $depth, $color);
transform: translateY(3vmin);
.container {
.left, .right, .front, .back {
// background-image:
// linear-gradient(180deg, #0000 0% 20%, darken($color-lightbrown, 5%) 20% 45%, #0000 45% 100%);
// background: #111;
display: none;
}
.bottom {
// background-color: #333;
filter: drop-shadow(0 0 0.75vmin black);
background: #111;
border-radius: 10%;
}
.top {
box-shadow: inset 0 0 15vmin #000a;
border-radius: 10%;
background-image:
radial-gradient(#0004, #0000 15vmin),
linear-gradient(to bottom, #0000 30%, darken($color, 5%) 30% 70%, #0000 70% 100%),
repeating-linear-gradient(180deg, #0000 0% 50%, #0001 50% 100%),
repeating-linear-gradient(90deg, #0000 0% 50%, #0001 50% 100%);
background-size: 100%, 100%, 8vmin 8vmin, 8vmin 8vmin;
animation: floorMove 0.2s infinite linear;
@keyframes floorMove {
to {
background-position-x: center, center, 8vmin, 8vmin;
}
}
&::after {
content: '';
position: absolute;
width: 25%;
height: 25%;
background: #0001;
box-shadow: 0 0 8vmin #0002;
animation: scaleShadow $leg-rot-speed linear 0.35s infinite alternate;
@keyframes scaleShadow {
from {
transform: scale(0.8);
}
to {
transform: scale(1.0);
}
}
}
}
}
}
.lion {
position: absolute;
width: 15vmin;
height: 15vmin;
bottom: 0;
transform-origin: 7.5vmin 7.5vmin;
transform: translate3d(27vmin, -4vmin, 0vmin);
animation: animate-lion $leg-rot-speed * 2 ease-in-out infinite;
@keyframes animate-lion {
0%, 100% {
transform:
translate3d(27vmin, -4vmin, 0vmin);
}
33% {
transform:
translate3d(27vmin, -8vmin, 0vmin)
rotateZ(10deg)
rotateX(-5deg);
}
66% {
transform:
translate3d(27vmin, -7vmin, 0vmin)
rotateZ(-10deg)
rotateX(5deg)
}
}
._face {
position: absolute;
bottom: 0;
}
.body {
width: 15vmin;
height: 15vmin;
#body {
$width: 15vmin;
$height: 15vmin;
$depth: 15vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
.container {
.right {
background-image:
linear-gradient(to top, #0000 2vmin, $color-darkbrown 2vmin, #0000 15vmin),
linear-gradient(to bottom, $color 12vmin, transparent 13vmin 15vmin),
linear-gradient(to right, transparent 4vmin, $color-white 4vmin 11vmin, transparent 11vmin 15vmin);
}
}
}
.mane {
width: 100%;
height: 100%;
#mane {
$width: 10vmin;
$height: 13.3vmin;
$depth: 16vmin;
$color: $color-darkbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, -2vmin, 0vmin);
.container {
.front, .back {
background-image:
linear-gradient(to bottom, darken($color-darkbrown, 15%) 0%, #0000 100%);
}
.top {
background-image:
linear-gradient(to bottom, darken($color-darkbrown, 15%) 0%, $color-darkbrown 50%, darken($color-darkbrown, 15%) 100%);
}
.left::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
background-image:
linear-gradient(to right, transparent 43%, $color-darkbrown 43% 57%, transparent 57% 100%),
linear-gradient(to bottom, $color-lightbrown 1.5vmin, transparent 1.5vmin 100%),
linear-gradient(to right, transparent 1vmin, $color-white 1vmin 2vmin, transparent 2vmin 7.6vmin, $color-white 7.6vmin 8.6vmin, transparent 8.6vmin 9.6vmin),
linear-gradient(to bottom, $color-lightbrown 15%, transparent 15% 70%, $color-lightbrown 70% 100%),
linear-gradient(to right, $color-lightbrown 10%, $color-black 10% 35%, $color-lightbrown 35% 65%, $color-black 65% 90%, $color-lightbrown 90% 100%);
background-size:
9.6vmin 1.5vmin, 100%, 100% 2.5vmin, 100%, 100%;
background-repeat: no-repeat;
}
}
}
#mane-lower {
$width: 1vmin;
$height: 2vmin;
$depth: 15vmin;
$color: $color-darkbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
.container {
.left::after {
content: '';
width: 7vmin;
height: 3.5vmin;
position: absolute;
background: $color-darkbrown;
transform: translateY(-0.75vmin);
}
}
}
}
.ears {
width: 100%;
height: 100%;
#ear-left {
$width: 3vmin;
$height: 2vmin;
$depth: 4.5vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(1vmin, -15vmin, 4vmin);
.container {
.left::after {
content: '';
width: 70%;
height: 50%;
background: $color-white;
transform: translateY(0.25vmin);
}
}
}
#ear-right {
$width: 3vmin;
$height: 2vmin;
$depth: 4.5vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(1vmin, -15vmin, -4vmin);
.container {
.left::after {
content: '';
width: 70%;
height: 50%;
background: $color-white;
transform: translateY(0.25vmin);
}
}
}
}
.nose {
width: 100%;
height: 100%;
transform: translate3d(-3vmin, -5vmin, 0);
#nose-top-back {
$width: 1.5vmin;
$height: 1.75vmin;
$depth: 5vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(1.5vmin, 0vmin, 0vmin);
}
#nose-top-front {
$width: 1.5vmin;
$height: 1.75vmin;
$depth: 5vmin;
$color: $color-black;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
}
#nose-bottom {
$width: 3vmin;
$height: 2vmin;
$depth: 5vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 2vmin, 0vmin);
}
}
.tail {
width: 100%;
height: 100%;
transform-origin: bottom;
transform: translate3d(15vmin, -2vmin, 0vmin);
animation: rotTail $leg-rot-speed * 2 ease-in-out infinite;
@keyframes rotTail {
0%, 100% {
transform:
translate3d(15vmin, -2vmin, 0vmin)
rotateX(0deg);
}
33% {
transform:
translate3d(15vmin, -2vmin, 0vmin)
rotateX(7deg);
}
66% {
transform:
translate3d(15vmin, -2vmin, 0vmin)
rotateX(-7deg);
}
}
#tail-bottom {
$width: 2vmin;
$height: 16vmin;
$depth: 2vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
.container {
.left, .right, .back, .front {
background-image:
linear-gradient(to top, $color-darkbrown 0vmin, #0000 15vmin);
}
}
}
#tail-top-back {
$width: 4vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(-4vmin, -14vmin, 0vmin);
}
#tail-top-front {
$width: 2vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-darkbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(-6vmin, -14vmin, 0vmin);
}
}
.legs {
.leg-left-back {
width: 4vmin;
height: 4vmin;
transform:
translate3d(11vmin, 0vmin, 7.5vmin)
rotateZ(0deg);
animation: rot-left-leg-back $leg-rot-speed ease-in-out $leg-rot-speed * 0.25 infinite alternate;
@keyframes rot-left-leg-back {
to {
transform:
translate3d(11vmin, 0vmin, 7.5vmin)
rotateZ(-90deg);
}
}
#leg-left-back {
$width: 4vmin;
$height: 6vmin;
$depth: 4vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 4vmin, -2vmin);
.container {
.left, .back, .front {
background-image:
linear-gradient(to bottom, transparent 5vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.right {
background-image:
linear-gradient(to bottom, $color-darkbrown, 3vmin, transparent 4vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.bottom {
background-color: $color-white;
}
}
}
}
.leg-right-back {
width: 4vmin;
height: 4vmin;
transform:
translate3d(11vmin, 0vmin, -7.5vmin)
rotateZ(0deg);
animation: rot-right-leg-back $leg-rot-speed ease-in-out $leg-rot-speed * 0.25 + 0.05s infinite alternate;
@keyframes rot-right-leg-back {
to {
transform:
translate3d(11vmin, 0vmin, -7.5vmin)
rotateZ(-90deg);
}
}
#leg-right-back {
$width: 4vmin;
$height: 6vmin;
$depth: 4vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 4vmin, 2vmin);
.container {
.left, .back, .front {
background-image:
linear-gradient(to bottom, transparent 5vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.right {
background-image:
linear-gradient(to bottom, $color-darkbrown, 3vmin, transparent 4vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.bottom {
background-color: $color-white;
}
}
}
}
.leg-left-front {
width: 4vmin;
height: 4vmin;
transform:
translate3d(0vmin, 0vmin, 7.5vmin)
rotateZ(0deg);
animation: rot-left-leg-front $leg-rot-speed ease-in-out infinite alternate;
@keyframes rot-left-leg-front {
to {
transform:
translate3d(0vmin, 0vmin, 7.5vmin)
rotateZ(90deg);
}
}
#leg-left-front {
$width: 4vmin;
$height: 6vmin;
$depth: 4vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 4vmin, -2vmin);
.container {
.right, .back, .front {
background-image:
linear-gradient(to bottom, transparent 5vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.left {
background-image:
linear-gradient(to bottom, $color-darkbrown, 3vmin, transparent 4vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.bottom {
background-color: $color-white;
}
}
}
}
.leg-right-front {
width: 4vmin;
height: 4vmin;
transform:
translate3d(0vmin, 0vmin, -7.5vmin)
rotateZ(0deg);
animation: rot-right-leg-front $leg-rot-speed 0.05s ease-in-out infinite alternate;
@keyframes rot-right-leg-front {
to {
transform:
translate3d(0vmin, 0vmin, -7.5vmin)
rotateZ(90deg);
}
}
#leg-right-front {
$width: 4vmin;
$height: 6vmin;
$depth: 4vmin;
$color: $color-lightbrown;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 4vmin, 2vmin);
.container {
.right, .back, .front {
background-image:
linear-gradient(to bottom, transparent 5vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.left {
background-image:
linear-gradient(to bottom, $color-darkbrown, 3vmin, transparent 4vmin, darken($color-white, 5%) 5vmin 6vmin);
}
.bottom {
background-color: $color-white;
}
}
}
}
}
}
}
}
}
!
