@use "sass:math";
@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap');
$scene-width: 70vmin;
$scene-depth: 70vmin;
$scene-height: 20vmin;
$scale: 1.75;
$color-main: #4F7EA6;
$color-body: #D25667;
$color-white: #F5F5F5;
$color-window: #8FBAD5CC;
$color-windowsill: #3B568E;
$color-light: #DFB190;
$color-tyre: #1A1C37;
$color-bookshelf: #1A1C37;
$color-carton: #C28239;
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@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);
}
}
}
@mixin wedge($width, $height, $depth, $color, $direction: right) {
width: $width;
height: $height;
.container {
position: relative;
width: 100%;
height: 100%;
* {
position: absolute;
bottom: 0;
}
.side {
width: $depth;
height: $height;
background-color: $color;
@if $direction == right {
transform-origin: left top;
transform:
rotateY(-90deg)
translateX($depth / -2);
}
@else {
transform-origin: left top;
transform:
rotateY(90deg)
translateX($depth / -2)
translateZ($width);
}
}
.top {
background-color: lighten($color, 5%);
$hypLength: math.sqrt(strip-unit($width * $width + $height * $height));
$angle: math.asin(strip-unit($height) / $hypLength);
width: $hypLength * 1vmin;
height: $depth;
@if $direction == right {
transform-origin: bottom left;
transform:
rotateX(90deg)
translateY($depth / 2)
translateZ($height)
rotateY($angle);
}
@else {
transform-origin: bottom left;
transform:
rotateX(90deg)
translateY($depth / 2)
rotateY(-$angle);
}
}
.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;
@if $direction == right {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
@else {
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
transform-origin: bottom left;
transform:
translateZ($depth / 2);
}
.back {
background-color: darken($color, 8%);
width: $width;
height: $height;
@if $direction == right {
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
@else {
clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
}
transform-origin: center;
transform:
rotateY(180deg)
translateZ($depth / 2);
}
}
}
@mixin cylinder($width, $height, $color, $parts: 36) {
width: $width;
height: $height;
$circumference: $height * math.$pi;
$part-width: $circumference / $parts;
.container {
&::before {
content: '';
position: absolute;
width: $height;
height: $height;
background: lighten($color, 5%);
transform:
translateY(-$height)
rotateY(90deg)
translateZ(-$height / 2);
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
width: $height;
height: $height;
background: lighten($color, 5%);
transform:
translateY(-$height)
rotateY(90deg)
translateZ(-$height / 2)
translateZ($width)
;
border-radius: 50%;
}
}
@for $i from 1 through $parts {
span:nth-child(#{$i}) {
width: $width;
height: $part-width;
background: $color;
transform:
translateY($height * -0.5 + $part-width * 0.47)
rotateX($i * 10deg)
translateZ($height * 0.5)
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-color: $color-main;
overflow: hidden;
perspective: 1000px;
.scene, .scene * {
transform-style: preserve-3d;
}
.scene {
position: relative;
width: $scene-width;
height: $scene-height;
transform: rotateX(-10deg);
animation: tiltVan 22s ease-in-out infinite;
@keyframes tiltVan {
0% {
transform:
rotateX(-10deg);
}
30% {
transform:
rotateX(0deg);
}
70% {
transform:
rotateX(-30deg);
}
100% {
transform:
rotateX(-10deg);
}
}
&::after {
content: '';
position: absolute;
width: $scene-width;
height: $scene-depth;
left: 0;
bottom: 0;
z-index: -100;
border-radius: 50%;
box-shadow:
-0.1vmin -0.1vmin 0.7vmin #fff3,
0.1vmin 0.1vmin 0.7vmin #0002;
background-color: #0000;
transform:
rotateX(90deg)
translateZ(-35vmin);
display: none;
}
.cube, .cube *, ._face, .van, .van * {
position: absolute;
bottom: 0;
}
.van {
position: absolute;
width: 30vmin;
height: 17.5vmin;
bottom: 0;
transform-origin: 15vmin 8.75vmin;
transform:
translate3d(18vmin, -2.5vmin, 0vmin)
rotateY(0deg)
scale3d($scale, $scale, $scale);
animation: moveVan 30s ease-in-out infinite;
@keyframes moveVan {
0% {
transform:
translate3d(18vmin, -2.5vmin, 0vmin)
rotateY(0deg)
scale3d($scale, $scale, $scale);
}
15% {
transform:
translate3d(18vmin, -2.6vmin, 0vmin)
rotateY(200deg)
scale3d($scale, $scale, $scale);
}
30% {
transform:
translate3d(18vmin, -2.6vmin, 0vmin)
rotateY(180deg)
rotateX(0deg);
}
45% {
transform:
translate3d(18vmin, -2.6vmin, 0vmin)
rotateY(120deg)
rotateX(0deg)
scale3d($scale, $scale, $scale);
}
60% {
transform:
translate3d(18vmin, -2.6vmin, 0vmin)
rotateY(-10deg)
scale3d($scale, $scale, $scale);
}
80% {
transform:
translate3d(18vmin, -2.6vmin, 0vmin)
rotateY(-40deg)
scale3d($scale, $scale, $scale);
}
100% {
transform:
translate3d(18vmin, -2.5vmin, 0vmin)
rotateY(0deg)
scale3d($scale, $scale, $scale);
}
}
.cab {
width: 8vmin;
height: 13.5vmin;
transform-origin: 4vmin 6.75vmin;
animation: rotCab 0.3s ease-in-out infinite alternate;
@keyframes rotCab {
0% {
transform:
rotateX(0.5deg)
rotateY(0.5deg);
}
33% {
transform:
rotateX(0.5deg)
rotateY(-0.5deg);
}
66% {
transform:
rotateX(-0.5deg)
rotateY(0.5deg);
}
100% {
transform:
rotateX(-0.5deg)
rotateY(-0.5deg);
}
}
#cab-base {
$width: 8vmin;
$height: 1vmin;
$depth: 8vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
.container {
.bottom::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #0001;
transform: translateZ(3vmin);
box-shadow: 0 0 2vmin #0002;
}
}
}
#cab-body {
$width: 7.5vmin;
$height: 5vmin;
$depth: 7.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0.25vmin, -1vmin, 0vmin);
.container {
.front::after {
content: '';
position: absolute;
width: 7.5vmin;
height: 12.5vmin;
background-color: $color-body;
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 15%)),
linear-gradient(to left, #0000, darken($color-body, 5%));
transform: translate3d(0vmin, -3.75vmin, 0.01vmin);
clip-path: polygon(2.5vmin 0, 0 7.5vmin, 0 12.5vmin, 0.5vmin 12.5vmin, 0.5vmin 7.5vmin, 2.9vmin 0.5vmin, 6.25vmin 0.5vmin, 6.25vmin 7.5vmin, 0.5vmin 7.5vmin, 0.5vmin 12.5vmin, 7.5vmin 12.5vmin, 7.5vmin 0);
}
.back::after {
content: '';
position: absolute;
width: 7.5vmin;
height: 12.5vmin;
background-color: darken($color-body, 10%);
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 20%));
transform: translate3d(0vmin, -3.75vmin, -0.01vmin);
clip-path: polygon(2.5vmin 0, 0 7.5vmin, 0 12.5vmin, 0.5vmin 12.5vmin, 0.5vmin 7.5vmin, 2.9vmin 0.5vmin, 6.25vmin 0.5vmin, 6.25vmin 7.5vmin, 0.5vmin 7.5vmin, 0.5vmin 12.5vmin, 7.5vmin 12.5vmin, 7.5vmin 0);
}
}
}
#cab-light {
$width: 0.25vmin;
$height: 2vmin;
$depth: 7.5vmin;
$color: darken($color-body, 10%);
@include cylinder($width, $height, $color);
transform: translate3d(0vmin, -2.75vmin, 0vmin);
.container {
&::before {
background-image:
radial-gradient(circle, $color-light 50%, transparent 55% 100%);
}
&::after {
box-shadow: 0 0 0.15vmin #0005;
}
}
}
#cab-back {
$width: 1.25vmin;
$height: 12vmin;
$depth: 7.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(6.5vmin, -1vmin, 0vmin);
}
#cab-roof {
$width: 5vmin;
$height: 0.5vmin;
$depth: 7.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(2.75vmin, -13vmin, 0vmin);
.container {
.top {
background-image:
linear-gradient(to left, #0000, darken($color-body, 5%)),
linear-gradient(to top, #0000, darken($color-body, 5%));
}
}
}
.cab-frame {
width: 7.5vmin;
height: 7.9vmin;
transform-origin: bottom left;
transform: translate3d(0.25vmin, -6vmin, 0vmin)
rotateZ(18.5deg);
#cab-frame-left {
$width: 0.5vmin;
$height: 7.9vmin;
$depth: 0.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 3.5vmin);
}
#cab-frame-right {
$width: 0.5vmin;
$height: 7.9vmin;
$depth: 0.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, -3.5vmin);
}
#cab-window-front {
width: 7.5vmin;
height: 7.5vmin;
background-color: $color-window;
transform:
translate3d(-3.5vmin, 0vmin, 0vmin)
rotateY(90deg);
}
}
#cab-window-left {
width: 6vmin;
height: 7vmin;
background-color: $color-window;
transform: translate3d(0.75vmin, -6vmin, 3.5vmin);
clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#cab-window-right {
width: 6vmin;
height: 7vmin;
background-color: $color-window;
transform: translate3d(0.75vmin, -6vmin, -3.5vmin);
clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#cab-top-left {
$width: 1vmin;
$height: 2vmin;
$depth: 4vmin;
$color: $color-white;
@include wedge($width, $height, $depth, $color);
transform:
translate3d(4.75vmin, -13.5vmin, 0.5vmin)
rotateY(-90deg);
.container {
.side {
background: transparent;
}
}
}
#cab-top-right {
$width: 1vmin;
$height: 2vmin;
$depth: 4vmin;
$color: $color-white;
@include wedge($width, $height, $depth, $color);
transform:
translate3d(4.75vmin, -13.5vmin, -0.5vmin)
rotateY(90deg);
.container {
.side {
background: transparent;
}
}
}
#cab-handle-left {
$width: 1.2vmin;
$height: 0.2vmin;
$depth: 0.2vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform:
translate3d(5.1vmin, -4.5vmin, 3.7vmin);
}
#cab-handle-right {
$width: 1.2vmin;
$height: 0.2vmin;
$depth: 0.2vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform:
translate3d(5.1vmin, -4.5vmin, -3.7vmin);
}
.wheel-front {
width: 4vmin;
height: 4vmin;
transform:
translateX(1vmin)
translateY(2.5vmin);
animation: rotWheelFront 1s linear infinite;
@keyframes rotWheelFront {
to {
transform:
translateX(1vmin)
translateY(2.5vmin)
rotateZ(-360deg);
}
}
#wheel-front {
$width: 2vmin;
$height: 4vmin;
$color: $color-tyre;
@include cylinder($width, $height, $color);
transform:
translate3d(1vmin, 0vmin, 0vmin)
rotateY(90deg);
.container {
span:nth-child(3n) {
border-top: 1px solid lighten($color-tyre, 20%);
}
&::after, &::before {
background-image:
radial-gradient(circle at 50% 30%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 50% 70%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 30% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 70% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle, $color-tyre, 15%, darken($color-white, 5%) 17% 40%, $color-tyre 42% 100%);
}
}
}
}
}
.body {
width: 22vmin;
height: 17vmin;
transform-origin: 11vmin 8.5vmin;
transform: translate3d(8vmin, 0vmin, 0vmin);
animation: rotBody 0.3s ease-in-out infinite alternate;
@keyframes rotBody {
0% {
transform:
translate3d(8vmin, 0vmin, 0vmin)
rotateX(-0.25deg)
rotateY(-0.25deg);
}
33% {
transform:
translate3d(8vmin, 0vmin, 0vmin)
rotateX(-0.25deg)
rotateY(0.25deg);
}
66% {
transform:
translate3d(8vmin, 0vmin, 0vmin)
rotateX(0.25deg)
rotateY(-0.25deg);
}
100% {
transform:
translate3d(8vmin, 0vmin, 0vmin)
rotateX(0.25deg)
rotateY(0.25deg);
}
}
#body-base {
$width: 22vmin;
$height: 1vmin;
$depth: 14vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
.container {
.bottom::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #0001;
transform: translateZ(3vmin);
box-shadow: 0 0 3vmin #0002;
}
}
}
#body-front {
$width: 0.5vmin;
$height: 16vmin;
$depth: 13.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0.25vmin, -1vmin, 0vmin);
.container {
.right::after {
content: '';
position: absolute;
width: 97%;
height: 97%;
background-image:
linear-gradient(to right, #0000, darken($color-body, 20%));
}
.left::after {
content: '';
position: absolute;
width: 100%;
height: 16.5vmin;
background-color: $color-body;
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 15%)),
linear-gradient(to left, #0000, darken($color-body, 5%));
transform: translate3d(0vmin, -0.25vmin, 0.01vmin);
}
}
}
#body-back {
$width: 0.5vmin;
$height: 16vmin;
$depth: 13.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(21.25vmin, -1vmin, 0vmin);
.container {
.left::after {
content: '';
position: absolute;
width: 97%;
height: 97%;
background-image:
linear-gradient(to left, #0000, darken($color-body, 20%));
}
.right::after {
content: '';
position: absolute;
width: 100%;
height: 16.5vmin;
background-color: $color-body;
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 15%)),
linear-gradient(to right, #0000, darken($color-body, 5%));
transform: translate3d(0vmin, -0.25vmin, 0.01vmin);
}
}
}
#body-right {
$width: 21.5vmin;
$height: 16vmin;
$depth: 0.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform:
translate3d(0.25vmin, -1vmin, -6.5vmin)
rotateY(180deg);
.container {
.back::after {
content: '';
position: absolute;
width: 97%;
height: 97%;
background-color: darken($color-body, 23%);
}
.front::after {
content: 'ICE CREAM';
display: grid;
place-items: center;
color: #fff9;
font-family: 'Rubik Moonrocks', cursive;
font-size: 3vmin;
position: absolute;
width: 100%;
height: 16.5vmin;
text-shadow: 0 0 2vmin #0003;
background-color: darken($color-body, 10%);
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 20%));
transform: translate3d(0vmin, -0.25vmin, 0.05vmin);
}
}
}
#body-left {
$width: 21.5vmin;
$height: 6vmin;
$depth: 0.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0.25vmin, -1vmin, 6.5vmin);
.container {
.front::after {
content: '';
position: absolute;
width: 21.5vmin;
height: 16.5vmin;
background-color: darken($color-body, 5%);
background-image:
linear-gradient(to bottom, #0000, darken($color-body, 15%));
transform: translate3d(0vmin, -5.25vmin, 0.01vmin);
clip-path: polygon(0 0, 0 16.5vmin, 0.5vmin 16.5vmin, 0.5vmin 0.5vmin, 21vmin 0.5vmin, 21vmin 10.5vmin, 0.5vmin 10.5vmin, 0.5vmin 16.5vmin, 21.5vmin 16.5vmin, 21.5vmin 0);
}
}
}
#body-shelf {
$width: 20.45vmin;
$height: 0.5vmin;
$depth: 4vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
transform: translate3d(0.75vmin, -7vmin, 4.75vmin);
.container {
.top {
box-shadow: inset 0 0 1.5vmin #0004;
}
}
}
.bookshelf {
width: 20.5vmin;
height: 14vmin;
transform: translate3d(0.75vmin, -1.05vmin, -6vmin);
#bookshelf-back {
$width: 20.5vmin;
$height: 14vmin;
$depth: 1vmin;
$color: lighten($color-bookshelf, 15%);
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0.5vmin);
}
#bookshelf-left {
$width: 0.2vmin;
$height: 14vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 2.5vmin);
}
#bookshelf-right {
$width: 0.2vmin;
$height: 14vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(20.5vmin, 0vmin, 2.5vmin);
}
#bookshelf-top {
$width: 20.5vmin;
$height: 0.2vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, -14vmin, 2.5vmin);
}
#bookshelf-vertical-left {
$width: 0.2vmin;
$height: 14vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(6.8vmin, 0vmin, 2.5vmin);
}
#bookshelf-vertical-right {
$width: 0.2vmin;
$height: 14vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(13.5vmin, 0vmin, 2.5vmin);
}
#bookshelf-horizontal-top {
$width: 20.5vmin;
$height: 0.2vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, -10vmin, 2.5vmin);
}
#bookshelf-horizontal-bottom {
$width: 20.5vmin;
$height: 0.2vmin;
$depth: 5vmin;
$color: $color-bookshelf;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, -6vmin, 2.5vmin);
}
#bookshelf-bottom {
$width: 20.5vmin;
$height: 0.75vmin;
$depth: 12vmin;
$color: darken($color-bookshelf, 10%);
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 6vmin);
}
}
.cartons {
#carton-1 {
$width: 3vmin;
$height: 2vmin;
$depth: 3vmin;
$color: $color-carton;
@include box($width, $height, $depth, $color);
transform: translate3d(3vmin, -7.5vmin, -2vmin)
rotateY(-3deg);
}
#carton-2 {
$width: 3vmin;
$height: 2vmin;
$depth: 3vmin;
$color: $color-carton;
@include box($width, $height, $depth, $color);
transform: translate3d(8.7vmin, -7.5vmin, -2vmin);
}
#carton-3 {
$width: 3vmin;
$height: 2vmin;
$depth: 3vmin;
$color: $color-carton;
@include box($width, $height, $depth, $color);
transform: translate3d(16vmin, -7.5vmin, -2vmin)
rotateY(5deg);
}
}
.glasses-bookshelf {
#glass-bookshelf-1 {
$width: 2vmin;
$height: 2vmin;
$color: #E26755;
@include cylinder($width, $height, $color);
transform: translate3d(3vmin, -11.5vmin, -1.5vmin)
rotateZ(90deg)
rotateY(-3deg);
.container {
span {
background-image:
linear-gradient(to left, #0000 80%, darken($color, 20%) 81% 100%);
}
&::before {
background: darken($color, 20%);
}
}
}
#glass-bookshelf-2 {
$width: 2vmin;
$height: 2vmin;
$color: #F5B950;
@include cylinder($width, $height, $color);
transform: translate3d(10vmin, -11.5vmin, -2vmin)
rotateZ(90deg)
rotateY(-3deg);
.container {
span {
background-image:
linear-gradient(to left, #0000 80%, darken($color, 20%) 81% 100%);
}
&::before {
background: darken($color, 20%);
}
}
}
#glass-bookshelf-3 {
$width: 2vmin;
$height: 2vmin;
$color: #44AC96;
@include cylinder($width, $height, $color);
transform: translate3d(16vmin, -11.5vmin, -3vmin)
rotateZ(90deg)
rotateY(-3deg);
.container {
span {
background-image:
linear-gradient(to left, #0000 80%, darken($color, 20%) 81% 100%);
}
&::before {
background: darken($color, 20%);
}
}
}
}
.body-roof {
#body-roof-front {
$width: 11vmin;
$height: 0.5vmin;
$depth: 13.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(0.25vmin, -17vmin, 0vmin);
.container {
.top::after {
content: '';
position: absolute;
width: 21.5vmin;
height: 13.5vmin;
background-color: $color-body;
background-image:
linear-gradient(to left, #0000, darken($color-body, 5%)),
linear-gradient(to top, #0000, darken($color-body, 5%));
transform: translate3d(5.25vmin, 0vmin, 0.01vmin);
clip-path: polygon(0 0, 0 13.5vmin, 11vmin 13.5vmin, 11vmin 5vmin, 17.5vmin 5vmin, 17.5vmin 8.5vmin, 11vmin 8.5vmin, 11vmin 13.5vmin, 21.5vmin 13.5vmin, 21.5vmin 0);
}
}
}
#body-roof-back {
$width: 4vmin;
$height: 0.5vmin;
$depth: 13.5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(17.75vmin, -17vmin, 0vmin);
}
#body-roof-left {
$width: 6.5vmin;
$height: 0.5vmin;
$depth: 5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(11.25vmin, -17vmin, 4.25vmin);
}
#body-roof-right {
$width: 6.5vmin;
$height: 0.5vmin;
$depth: 5vmin;
$color: $color-body;
@include box($width, $height, $depth, $color);
transform: translate3d(11.25vmin, -17vmin, -4.25vmin);
}
#body-roof-window {
width: 3.5vmin;
height: 6.5vmin;
background-color: $color-window;
transform-origin: bottom;
transform:
translate3d(9.5vmin, -17.25vmin, 0vmin)
rotateY(90deg)
rotateX(-90deg);
}
#body-roof-chimney {
$width: 1vmin;
$height: 2vmin;
$color: darken($color-body, 10%);
@include cylinder($width, $height, $color);
transform:
translate3d(3.5vmin, -17vmin, 0vmin)
rotateZ(90deg);
.container {
&::before {
background-image:
radial-gradient(circle, #0005 50%, transparent 55% 100%);
}
&::after {
box-shadow: 0 0 0.5vmin #0005;
}
}
}
}
.canopy-edge {
width: 21vmin;
height: 1vmin;
transform-origin: top;
transform:
translate3d(0.5vmin, -16.1vmin, 6.75vmin)
rotateX(70deg);
#body-canopy-edge {
$width: 21vmin;
$height: 1vmin;
$depth: 0.15vmin;
$color: darken($color-body, 5%);
@include box($width, $height, $depth, $color);
}
}
.canopy {
width: 20.5vmin;
height: 9.5vmin;
transform-origin: top;
transform:
translate3d(0.75vmin, -7.5vmin, 6.75vmin)
rotateX(35deg);
animation: moveCanopy 7s ease-in-out infinite alternate;
@keyframes moveCanopy {
0%, 10%, 30% {
transform:
translate3d(0.75vmin, -7.5vmin, 6.75vmin)
rotateX(0deg);
}
50% {
transform:
translate3d(0.75vmin, -7.5vmin, 6.75vmin)
rotateX(85deg);
}
55%, 100% {
transform:
translate3d(0.75vmin, -7.5vmin, 6.75vmin)
rotateX(70deg);
}
}
#body-canopy-main {
$width: 20.5vmin;
$height: 9.5vmin;
$depth: 0.1vmin;
$color: $color-white;
@include box($width, $height, $depth, $color);
.container {
.front, .back, .top, .bottom {
background-image:
repeating-linear-gradient(to right, #0000 20%, $color-body 20% 40%, #0000 40% 60%);
}
.front {
box-shadow: inset 0 0 2.5vmin #0003;
}
}
}
}
.poles {
.pole-left {
width: 2vmin;
height: 9vmin;
transform-origin: bottom;
transform:
translate3d(1vmin, -7.5vmin, 6vmin)
rotateX(-2deg);
animation: rotPoleLeft 7s ease-in-out infinite alternate;
@keyframes rotPoleLeft {
0%, 10%, 40% {
transform:
translate3d(1vmin, -7.5vmin, 6vmin)
rotateX(-2deg);
}
50%, 100% {
transform:
translate3d(1vmin, -7.5vmin, 6vmin)
rotateX(-20deg);
}
}
#pole-left{
$width: 0.2vmin;
$height: 9vmin;
$depth: 0.2vmin;
$color: $color-tyre;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
}
}
.pole-right {
width: 2vmin;
height: 9vmin;
transform-origin: bottom;
transform:
translate3d(20.75vmin, -7.5vmin, 6vmin)
rotateX(-2deg);
animation: rotPoleRight 7s ease-in-out infinite alternate;
@keyframes rotPoleRight {
0%, 10%, 40% {
transform:
translate3d(20.75vmin, -7.5vmin, 6vmin)
rotateX(-2deg);
}
50%, 100% {
transform:
translate3d(20.75vmin, -7.5vmin, 6vmin)
rotateX(-20deg);
}
}
#pole-right{
$width: 0.2vmin;
$height: 9vmin;
$depth: 0.2vmin;
$color: $color-tyre;
@include box($width, $height, $depth, $color);
transform: translate3d(0vmin, 0vmin, 0vmin);
}
}
}
.wheels-back {
width: 4vmin;
height: 4vmin;
transform:
translateY(2.5vmin)
translateX(15vmin);
animation: rotWheelBack 1s linear infinite;
@keyframes rotWheelBack {
to {
transform:
translateY(2.5vmin)
translateX(15vmin)
rotateZ(-360deg);
}
}
#wheel-back-left {
$width: 2vmin;
$height: 4vmin;
$color: $color-tyre;
@include cylinder($width, $height, $color);
transform:
translate3d(1vmin, 0vmin, 4vmin)
rotateY(90deg);
.container {
span:nth-child(3n) {
border-top: 1px solid lighten($color-tyre, 10%);
}
&::after, &::before {
background-image:
radial-gradient(circle at 50% 30%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 50% 70%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 30% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 70% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle, $color-tyre, 15%, darken($color-white, 5%) 17% 40%, $color-tyre 42% 100%);
}
}
}
#wheel-back-right {
$width: 2vmin;
$height: 4vmin;
$color: $color-tyre;
@include cylinder($width, $height, $color);
transform:
translate3d(1vmin, 0vmin, -4vmin)
rotateY(90deg);
.container {
span:nth-child(3n) {
border-top: 1px solid lighten($color-tyre, 10%);
}
&::after, &::before {
background-image:
radial-gradient(circle at 50% 30%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 50% 70%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 30% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle at 70% 50%, $color-tyre 5%, transparent 6% 100%),
radial-gradient(circle, $color-tyre, 15%, darken($color-white, 5%) 17% 40%, $color-tyre 42% 100%);
}
}
}
}
}
}
}
}
!
