$scene-width: 70vmin;
$scene-depth: 70vmin;
$scene-height: 20vmin;
$scale: 1.0;
$wing-speed: 0.075s;
$color-main: #A1713F;
$color-face: #89565E;
$color-features: #2F2A36;
$color-accent: #F14749;
$color-body: #E8C6A1;
$color-leg: #515157;
$color-foot: #E8E2D4;
$color-light-saber: #9EF4F5;
$color-rock: #3D3D3D;
@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(lighten($color-main, 10%), darken($color-main, 15%));
overflow: hidden;
perspective: 1000px;
.scene, .scene * {
transform-style: preserve-3d;
}
.scene {
position: relative;
width: $scene-width;
height: $scene-height;
// margin-top: -40%;
transform:
rotateX(-20deg)
rotateY(70deg)
scale3d($scale, $scale, $scale);
animation: rot 20s ease-in-out 0s infinite alternate;
@keyframes rot {
to {
transform:
rotateX(0deg)
rotateY(440deg)
scale3d($scale, $scale, $scale);
}
}
// base
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -100;
transform:
rotateX(90deg)
scale(1.0);
}
.cube, .cube * {
position: absolute;
bottom: 0;
}
#ground {
z-index: -50;
$width: $scene-width;
$height: 3vmin;
$depth: $scene-depth;
$color: #BC7D3D;
@include box($width, $height, $depth, $color);
.container {
.left, .right, .front, .back {
background-image:
linear-gradient(180deg, #0000 0% 20%, #AD6B2B 20% 45%, #0000 45% 100%);
}
.bottom {
background-color: #E1B366;
filter: drop-shadow(0 0 3.75rem black);
}
.top {
box-shadow: inset 0 0 15vmin #000a;
background-image:
radial-gradient(#0008, #0000 15vmin),
repeating-linear-gradient(180deg, #0000 0% 50%, #0001 50% 100%),
repeating-linear-gradient(90deg, #0000 0% 50%, #0001 50% 100%);
background-size: 100%, 4em 4em, 4em 4em;
}
}
}
.rocks {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
transform: translateY(-3vmin);
#rock-1 {
$width: 6vmin;
$height: 5vmin;
$depth: 5vmin;
$color: $color-rock;
@include box($width, $height, $depth, $color);
transform:
translate3d(5vmin, 2vmin, 25vmin)
rotateX(15deg)
rotateY(15deg);
}
#rock-2 {
$width: 8vmin;
$height: 4vmin;
$depth: 8vmin;
$color: $color-rock;
@include box($width, $height, $depth, $color);
transform:
translate3d(15vmin, 1.5vmin, -25vmin)
rotateX(-15deg)
rotateY(20deg);
}
#rock-3 {
$width: 9vmin;
$height: 4vmin;
$depth: 8vmin;
$color: $color-rock;
@include box($width, $height, $depth, $color);
transform:
translate3d(15vmin, 2vmin, -25vmin)
rotateX(5deg)
rotateY(-15deg)
rotateZ(3deg);
}
#rock-4 {
$width: 9vmin;
$height: 4vmin;
$depth: 8vmin;
$color: $color-rock;
@include box($width, $height, $depth, $color);
transform:
translate3d(45vmin, 1.5vmin, 18vmin)
rotateX(15deg)
rotateY(45deg);
}
#rock-5 {
$width: 12vmin;
$height: 4vmin;
$depth: 14vmin;
$color: $color-rock;
@include box($width, $height, $depth, $color);
transform:
translate3d(47vmin, 1.5vmin, -22vmin)
rotateX(-5deg)
rotateY(65deg);
}
}
.jedi {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
transform:
translate3d(30vmin, 0, 0);
.body, .head, .light-saber, .hair, .eyes,
.legs, .leg-left, .leg-right,
.arms, .arm-left, .arm-right, .elbow-left {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
}
.head {
width: 10vmin;
height: 8vmin;
transform:
translate3d(0vmin, -23vmin, 0);
animation: rotHead 10s ease-in-out infinite alternate;
@keyframes rotHead {
20%, 25% {
transform:
translate3d(0vmin, -23vmin, 0)
rotateY(20deg)
rotateZ(5deg);
}
50%, 55% {
transform:
translate3d(0vmin, -23vmin, 0)
rotateY(-20deg)
rotateZ(-5deg);
}
70%, 75% {
transform:
translate3d(0vmin, -23vmin, 0)
rotateY(15deg)
rotateZ(5deg);
}
100% {
transform:
translate3d(0vmin, -23vmin, 0)
rotateY(-10deg)
rotateZ(5deg);
}
}
#head {
$width: 10vmin;
$height: 7vmin;
$depth: 10vmin;
$color: $color-face;
@include box($width, $height, $depth, $color);
}
#neck {
$width: 4vmin;
$height: 2vmin;
$depth: 4vmin;
$color: darken($color-face, 3);
@include box($width, $height, $depth, $color);
transform:
translate3d(3vmin, 1.5vmin, 0);
}
#nose {
$width: 2vmin;
$height: 2vmin;
$depth: 2vmin;
$color: darken($color-face, 3);
@include box($width, $height, $depth, $color);
transform:
translate3d(-1.5vmin, -1.5vmin, 0);
}
.eyes {
#eye-left {
$width: 1.5vmin;
$height: 1.75vmin;
$depth: 1.75vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
transform:
translate3d(-0.3vmin, -3vmin, 4.25vmin);
}
#eye-right {
$width: 1.5vmin;
$height: 1.75vmin;
$depth: 1.75vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
transform:
translate3d(-0.3vmin, -3vmin, -4.25vmin);
}
}
.hair {
transform:
translate3d(-0.5vmin, -7vmin, -0vmin);
#hair-top {
$width: 11vmin;
$height: 2vmin;
$depth: 11vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
}
#hair-center {
$width: 2vmin;
$height: 3.1vmin;
$depth: 11vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
transform:
translate3d(4vmin, 3vmin, 0);
}
#hair-center-back {
$width: 2vmin;
$height: 2.1vmin;
$depth: 11vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
transform:
translate3d(6vmin, 2vmin, 0);
}
#hair-back {
$width: 3vmin;
$height: 5.1vmin;
$depth: 11vmin;
$color: $color-features;
@include box($width, $height, $depth, $color);
transform:
translate3d(8vmin, 5vmin, 0);
}
}
}
.body {
width: 9vmin;
height: 10vmin;
transform:
translate3d(0.5vmin, -12vmin, 0);
#body {
$width: 9vmin;
$height: 10vmin;
$depth: 10vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
.container {
.left {
background-image:
linear-gradient(90deg, #0000 0% 40%, $color-features 40% 60%, #0000 60% 100%),
linear-gradient(180deg, $color-accent 0% 30%, #0000 60% 100%);
}
.front, .back, .right {
background-image:
linear-gradient(180deg, $color-accent 0% 30%, #0000 60% 100%);
}
.top {
background-image:
radial-gradient(circle, #000a 0% 50%, #0000 100%);
}
}
}
}
.legs {
.leg-left {
width: 2vmin;
height: 11vmin;
transform:
translate3d(4vmin, -5vmin, 2.5vmin)
rotateY(10deg);
#leg-left {
$width: 2vmin;
$height: 11vmin;
$depth: 2vmin;
$color: $color-leg;
@include box($width, $height, $depth, $color);
}
#foot-left {
$width: 4vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-foot;
@include box($width, $height, $depth, $color);
transform:
translate3d(-2vmin, 2vmin, 0vmin);
}
}
.leg-right {
width: 2vmin;
height: 11vmin;
transform:
translate3d(4vmin, -5vmin, -2.5vmin)
rotateY(-10deg);
#leg-right {
$width: 2vmin;
$height: 11vmin;
$depth: 2vmin;
$color: $color-leg;
@include box($width, $height, $depth, $color);
}
#foot-right {
$width: 4vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-foot;
@include box($width, $height, $depth, $color);
transform:
translate3d(-2vmin, 2vmin, 0vmin);
}
}
}
.arms {
.arm-left {
width: 10vmin;
height: 10vmin;
transform:
translate3d(0, -14vmin, 5vmin);
animation: rotLeftArm 4s ease-in-out infinite alternate;
@keyframes rotLeftArm {
0%, 20% {
transform:
translate3d(0, -14vmin, 5vmin)
rotateY(5deg)
rotateX(5deg)
rotateZ(-5deg);
}
100% {
transform:
translate3d(0, -14vmin, 5vmin)
rotateY(10deg)
rotateX(10deg)
rotateZ(25deg);
}
}
#arm-left {
$width: 2vmin;
$height: 5vmin;
$depth: 2vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform:
translate3d(4vmin, -1vmin, 1vmin);
}
.elbow-left {
width: 10vmin;
height: 10vmin;
transform:
translate3d(1vmin, 4vmin, 0vmin)
rotateZ(0deg);
animation: rotLeftElbow 8s ease-in-out infinite alternate;
@keyframes rotLeftElbow {
0%, 20%, 100% {
transform:
translate3d(1vmin, 4vmin, 0vmin)
rotateZ(10deg);
}
40% {
transform:
translate3d(1vmin, 4vmin, 0vmin)
rotateZ(50deg);
}
}
#arm-left-bottom {
$width: 2vmin;
$height: 4vmin;
$depth: 2vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform:
translate3d(3vmin, -1vmin, 1vmin);
}
#hand-left {
$width: 2vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-face;
@include box($width, $height, $depth, $color);
transform:
translate3d(3vmin, 1vmin, 1vmin);
}
}
}
.arm-right {
width: 10vmin;
height: 10vmin;
animation: rotRightArm 6s ease-in-out infinite alternate;
@keyframes rotRightArm {
0%, 20% {
transform:
translate3d(0, -14vmin, -5vmin)
rotateY(-10deg)
rotateX(-5deg)
rotateZ(15deg);
}
45% {
transform:
translate3d(0, -14vmin, -5vmin)
rotateY(-10deg)
rotateX(-15deg)
rotateZ(85deg);
}
65% {
transform:
translate3d(0, -14vmin, -5vmin)
rotateY(-10deg)
rotateX(15deg)
rotateZ(65deg);
}
80% {
transform:
translate3d(0, -14vmin, -5vmin)
rotateY(-10deg)
rotateX(-20deg)
rotateZ(85deg);
}
100% {
transform:
translate3d(0, -14vmin, -5vmin)
rotateY(-10deg)
rotateX(-15deg)
rotateZ(85deg);
}
}
#arm-right {
$width: 2vmin;
$height: 9vmin;
$depth: 2vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform:
translate3d(4vmin, 3vmin, -1vmin);
}
#hand-right {
$width: 2vmin;
$height: 2vmin;
$depth: 2vmin;
$color: $color-face;
@include box($width, $height, $depth, $color);
transform:
translate3d(4vmin, 5vmin, -1vmin);
}
.light-saber {
#light-saber {
$width: 20vmin;
$height: 1.5vmin;
$depth: 1.5vmin;
$color: $color-light-saber;
@include box($width, $height, $depth, $color);
transform-origin: bottom right;
transform:
translate3d(-17vmin, 4.75vmin, -1vmin)
scale3d(0.0, 1, 1);
animation: extendLightsaber 6s ease-in infinite alternate;
@keyframes extendLightsaber {
0%, 35% {
transform:
translate3d(-17vmin, 4.75vmin, -1vmin)
scale3d(0.0, 1, 1);
}
40%, 100% {
transform:
translate3d(-17vmin, 4.75vmin, -1vmin)
scale3d(1, 1, 1);
}
}
.container {
.front, .back, .top, .bottom, .left {
animation: glowLightsaber 6s ease-in infinite alternate;
}
@keyframes glowLightsaber {
0%, 35% {
box-shadow: 0 0 1.25vmin 0 #0000;
}
40%, 100% {
box-shadow: 0 0 1.25vmin 0 #179BCF;
}
}
}
}
#light-saber-bolster {
$width: 1vmin;
$height: 1.5vmin;
$depth: 1.5vmin;
$color: black;
@include box($width, $height, $depth, $color);
transform:
translate3d(3vmin, 4.75vmin, -1vmin);
}
#light-saber-handle {
$width: 2vmin;
$height: 1.5vmin;
$depth: 1.5vmin;
$color: white;
@include box($width, $height, $depth, $color);
transform:
translate3d(6vmin, 4.75vmin, -1vmin);
}
}
}
}
}
}
}
!
