Step into the gritty world of Breaking Bad with a fully realized 3D truck scene built entirely with CSS—no images, no frameworks, just code! In this blog, we’ll recreate the iconic mobile meth lab truck using advanced CSS techniques, including 3D transforms, gradients, and keyframe animations, to build every detail of the truck and its surroundings. From the bold contours of the vehicle to subtle shadows and textures, this project is a tribute to both the show and the art of CSS creativity. Ready to cook up some design brilliance? Let’s get started!
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen 3D Breaking Bad – Pure CSS by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
#h.main .shake .shadows .shadow-1.shadow .shadow-2.shadow .shadow-3.shadow .truck .a0 .a0__front.face .a0__back.face .a0__right.face .a0__left.face .a0__top.face .a0__bottom.face .a1 .a1__front.face .a1__front-a.face .f-light .f-light .a1__back.face .a1__right.face .a1__left.face //- div.a1__top.face .a1__bottom.face .a2 .a2__front.face .a2__back.face .a2__right.face .a2__left.face //- div.a2__top.face .a2__bottom.face .a3 .a3__front.face .a3__back.face .a3__right.face .a3__left.face //- div.a3__top.face .a3__bottom.face .wheel-a.flex .circle.flex .circle-a - var n = 0; while n < 36 .circle-a__side - n++; .circle-a__bottom .circle-a__top .circle-b - var n = 0; while n < 36 .circle-b__side - n++; .circle-b__bottom .circle-b__top .wheel-b.flex .circle.flex .circle-a - var n = 0; while n < 36 .circle-a__side - n++; .circle-a__bottom .circle-a__top .circle-b - var n = 0; while n < 36 .circle-b__side - n++; .circle-b__bottom .circle-b__top .wheel-c.flex .circle.flex .circle-a - var n = 0; while n < 36 .circle-a__side - n++; .circle-a__bottom .circle-a__top .circle-b - var n = 0; while n < 36 .circle-b__side - n++; .circle-b__bottom .circle-b__top .wheel-d.flex .circle.flex .circle-a - var n = 0; while n < 36 .circle-a__side - n++; .circle-a__bottom .circle-a__top .circle-b - var n = 0; while n < 36 .circle-b__side - n++; .circle-b__bottom .circle-b__top .b1 .b1__front.face .f-light .f-hoods .f-hood .f-hood__front.face .f-hood__back.face .f-hood__right.face .f-hood__left.face .f-hood__top.face .f-hood__bottom.face .f-hood .f-hood__front.face .f-hood__back.face .f-hood__right.face .f-hood__left.face .f-hood__top.face .f-hood__bottom.face .f-light .b1__back.face .b1__right.face .b1__left.face //- div.b1__top.face .b1__bottom.face .c1 .c1__front.face .c1__front-a.face .f-lights .f-light .f-light .f-light .f-light .f-light .f-window .f-washers .f-washer .f-washer .f-reflexa .f-reflexb .f-a .f-a__front.face .f-a__back.face .f-a__right.face .f-a__left.face .f-a__top.face .f-a__bottom.face .f-line .c1__back.face .c1__right.face .f-swindows .f-swindow .f-swindow .f-swindow .f-swindow .f-swindow .f-swindow .c1__left.face .f-swindows.f-swindows--reverse .f-swindow .f-swindow .f-swindow .f-swindow .f-swindow .f-swindow .f-sdoor .c1__top.face .f-airs .f-air .f-air__front.face .f-air__back.face .f-air__right.face .f-air__left.face .f-air__top.face .f-air__bottom.face .f-sunr .f-sunr-t .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-bubble .f-air .f-air__front.face .f-air__back.face .f-air__right.face .f-air__left.face .f-air__top.face .f-air__bottom.face .c1__bottom.face .d1 .d1-l .d1-l__front.face .d1-l__back.face .d1-l__right.face .d1-l__left.face .d1-l__top.face .d1-l__bottom.face .d1-r .d1-r__front.face .d1-r__back.face .d1-r__right.face .d1-r__left.face .d1-r__top.face .d1-r__bottom.face .d1-f .d1-fa .d1-fa__front.face .d1-fa__back.face .d1-fa__right.face .d1-fa__left.face .d1-fa__top.face .d1-fa__bottom.face .d1-fa .d1-fa__front.face .d1-fa__back.face .d1-fa__right.face .d1-fa__left.face .d1-fa__top.face .d1-fa__bottom.face .d1-fa .d1-fa__front.face .d1-fa__back.face .d1-fa__right.face .d1-fa__left.face .d1-fa__top.face .d1-fa__bottom.face .d1-fa .d1-fa__front.face .d1-fa__back.face .d1-fa__right.face .d1-fa__left.face .d1-fa__top.face .d1-fa__bottom.face
CSS Code
Create a file style.css and paste the code below.
$bg-1: #76b9e9;
$bg-2: #518bb5;
$brown-1: #eeeada;
$brown-2: #dfd9c1;
$brown-3: #b9b49f;
$brown-4: #535149;
$black-1: #222222;
$black-2: #0f0f0f;
$black-3: #000000;
$white-1: #fffeff;
$white-2: #e2e2e2;
$white-3: #d1cece;
$orange-1: #ff6e49;
$orange-2: #cd4d2c;
$orange-3: #b12400;
$blue-1: #4a778c;
$blue-2: #1d3746;
$blue-3: #121f2e;
$meta: #388dbb;
/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
&__side {
position: absolute;
height: (2 * $pi * ($base / 2)) / $sides;
width: $width;
background-color: darken($color, 15);
@for $var from 1 to ($sides + 1) {
&:nth-of-type(#{$var}) {
transform: rotateX($var * $degree / $sides) translateZ($base / 2);
}
}
// @for $var from 1 to 20 {
// &:nth-of-type(#{$var}){ background-color: darken($color, $var * 1.5); }
// }
// @for $var from 1 to 20 {
// &:nth-last-of-type(#{$var}){ background-color: darken($color, $var * 1.5); }
// }
}
&__top,
&__bottom {
position: absolute;
width: $base;
height: $base;
border-radius: 50%;
transform: rotateY(90deg) translateZ($width / 2);
}
&__bottom {
transform: rotateY(90deg) translateZ($width / -2);
}
}
@mixin cube($width, $height, $depth) {
&__front {
@include cube-front($width, $height, $depth);
}
&__back {
@include cube-back($width, $height, $depth);
}
&__right {
@include cube-right($width, $height, $depth);
}
&__left {
@include cube-left($width, $height, $depth);
}
&__top {
@include cube-top($width, $height, $depth);
}
&__bottom {
@include cube-bottom($width, $height, $depth);
}
}
//----------------------
@mixin cube-front($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-($height - ($depth * 2)));
}
@mixin cube-back($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width)
translateY(-$height);
}
@mixin cube-right($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width)
translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: translateZ($height);
}
@mixin cube-bottom($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: rotateY(180deg) translateX(-$width);
}
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {
animation: #{$animation} #{$time} infinite ease;
@keyframes #{$animation} {
0%,
15%,
45%,
60%,
62%,
68% {
@if $side == "cube-front" {
@include cube-front($width-el, $height-el, $depth-el);
} @else if $side == "cube-back" {
@include cube-back($width-el, $height-el, $depth-el);
} @else if $side == "cube-right" {
@include cube-right($width-el, $height-el, $depth-el);
} @else if $side == "cube-left" {
@include cube-left($width-el, $height-el, $depth-el);
} @else if $side == "cube-top" {
@include cube-top($width-el, $height-el, $depth-el);
} @else if $side == "cube-bottom" {
@include cube-bottom($width-el, $height-el, $depth-el);
}
}
20%,
40%,
58%,
64%,
70%,
100% {
@if $side == "cube-front" {
@include cube-front($width-el, $height-finish, $depth-el);
} @else if $side == "cube-back" {
@include cube-back($width-el, $height-finish, $depth-el);
} @else if $side == "cube-right" {
@include cube-right($width-el, $height-finish, $depth-el);
} @else if $side == "cube-left" {
@include cube-left($width-el, $height-finish, $depth-el);
} @else if $side == "cube-top" {
@include cube-top($width-el, $height-finish, $depth-el);
} @else if $side == "cube-bottom" {
@include cube-bottom($width-el, $height-el, $depth-el);
}
}
}
}
@mixin cube-color($color) {
&__front {
background-color: darken($color, 5);
}
&__back {
background-color: darken($color, 10);
}
&__right {
background-color: darken($color, 10);
}
&__left {
background-color: darken($color, 20);
}
&__top {
background-color: $color;
}
&__bottom {
background-color: darken($color, 20);
}
}
/***********************/
/***********************/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
font-family: sans-serif;
}
/***********************/
/***********************/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
background-color: $bg-1;
}
.face {
position: absolute;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main {
width: 20vmin;
height: 40vmin;
transform: perspective(30000px) scale(1.2) rotateX(55deg) rotateZ(35deg)
translateZ(-10vmin);
transition: 100ms linear;
cursor: grab;
}
.shake {
width: 100%;
height: 100%;
animation: shake 2500ms cubic-bezier(0.17, 0.67, 0.52, 0.94) infinite;
}
.truck {
position: absolute;
width: 20vmin;
height: 40vmin;
animation: truck 1000ms cubic-bezier(0.17, 0.67, 0.52, 0.94) infinite;
}
.shadows {
position: absolute;
width: 20vmin;
height: 40vmin;
}
.shadow {
position: absolute;
height: 100%;
transform-origin: bottom left;
box-shadow: 0 0 1vmin $bg-2;
&-1 {
width: 50%;
left: 100%;
transform: skewY(-15deg);
background-color: $bg-2;
filter: blur(0.35vmin);
}
&-2 {
width: 150%;
transform: skewY(-15deg);
background-color: $bg-2;
filter: blur(0.35vmin);
}
&-3 {
width: 100%;
background-image: linear-gradient(
to right,
rgba(darken($bg-2, 5), 0.85),
rgba(darken($bg-2, 20), 0.85),
rgba(darken($bg-2, 15), 0.85)
);
filter: blur(0.5vmin);
}
}
/***********************/
/***********************/
.a0 {
$width-el: 20vmin;
$height-el: 3vmin;
$depth-el: 0.75vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
top: -1.5vmin;
left: 0;
transform: translateZ(2.75vmin) rotateX(25deg);
&__front {
background-color: darken($brown-1, 10);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 2.5vmin;
.f-light {
position: relative;
width: 1vmin;
height: 1vmin;
background-color: $orange-3;
border-radius: 50%;
}
}
&__back {
background-color: darken($brown-3, 15);
}
&__right {
background-color: darken($brown-3, 10);
}
&__left {
background-color: darken($brown-1, 5);
}
&__top {
background-color: darken($brown-3, 5);
}
&__bottom {
background-color: $brown-4;
}
}
.a1 {
$width-el: 20vmin;
$height-el: 3vmin;
$depth-el: 1vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
bottom: 0;
left: 0;
transform: translateZ(2vmin);
&__front {
background-color: $brown-1;
&-a {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
padding: 1vmin 2.5vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-image: linear-gradient(
to bottom,
darken($brown-2, 5),
darken($brown-2, 10)
);
.f-light {
position: relative;
width: 1.15vmin;
height: 1.15vmin;
background-color: $orange-2;
border-radius: 50%;
}
}
}
&__back {
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: $brown-4;
}
}
&__right {
background-color: darken($brown-3, 15);
&::before {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
}
&__left {
background-color: darken($brown-1, 5);
&::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
}
&__top {
background-color: $brown-2;
top: -1.35vmin;
height: 3.35vmin;
}
&__bottom {
background-color: $brown-4;
}
}
.a2 {
$width-el: 20vmin;
$height-el: 3vmin;
$depth-el: 8vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
bottom: 9vmin;
left: 0;
transform: translateZ(2vmin);
&__front {
background-color: $brown-1;
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: $brown-4;
}
}
&__back {
background-color: $brown-3;
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: $brown-4;
}
}
&__right {
background-color: darken($brown-3, 15);
&::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
}
&__left {
background-color: darken($brown-1, 5);
&::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
}
&__top {
background-color: $brown-2;
top: -1.35vmin;
height: 18.75vmin;
}
&__bottom {
background-color: $brown-4;
}
}
.a3 {
$width-el: 20vmin;
$height-el: 3vmin;
$depth-el: 4vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
bottom: 32vmin;
left: 0;
transform: translateZ(2vmin);
&__front {
background-color: $brown-1;
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: $brown-4;
}
}
&__back {
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.5vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: darken($brown-3, 25);
}
}
&__right {
background-color: darken($brown-3, 15);
&::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-3, 15) 1.6vmin
);
}
}
&__left {
background-color: darken($brown-1, 5);
&::before {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
&::after {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
65deg,
transparent 1.6vmin,
darken($brown-1, 5) 1.6vmin
);
}
}
&__top {
background-color: $brown-2;
bottom: -1.35vmin;
height: 9.35vmin;
}
&__bottom {
background-color: $brown-4;
}
}
.wheel-a,
.wheel-b,
.wheel-c,
.wheel-d {
position: absolute;
bottom: 2.75vmin;
left: -4.5vmin;
height: 5vmin;
width: 5vmin;
transform-origin: bottom right;
transform: rotateY(90deg);
.circle {
$sides: 36;
$degree: 360deg;
$width: 2vmin;
width: 2vmin;
height: 2vmin;
border-radius: 50%;
&-a {
$base: 5vmin;
$pi: 3.5;
position: absolute;
width: $width;
height: $base;
transform: rotateY(90deg) translateX(-50%);
@include cylinder($base, $sides, $degree, $pi, $width, $black-1);
&__top {
border: 0.5vmin solid $black-1;
}
&__bottom {
border: 0.5vmin solid $black-3;
}
}
&-b {
$base: 4vmin;
$pi: 3.5;
position: absolute;
width: $width;
height: $base;
transform: rotateY(90deg) translateX(-50%);
@include cylinder($base, $sides, $degree, $pi, $width, $black-1);
&__bottom {
border: 0.25vmin solid $white-3;
background-color: $black-2;
}
&__top {
border: 0.25vmin solid $white-1;
background-color: $black-1;
}
}
}
}
.wheel-b {
bottom: 25.75vmin;
}
.wheel-c {
bottom: 2.75vmin;
left: 12.5vmin;
}
.wheel-d {
bottom: 25.75vmin;
left: 12.5vmin;
}
.b1 {
$width-el: 20vmin;
$height-el: 5vmin;
$depth-el: 21.35vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
bottom: -1.35vmin;
left: 0;
transform: translateZ(5vmin);
&__front {
background-color: darken($brown-1, 5);
display: grid;
grid-template-columns: auto 1fr auto;
padding-top: 1.5vmin;
grid-column-gap: 1.25vmin;
.f-light {
position: relative;
top: 1.5vmin;
width: 2.5vmin;
height: 1vmin;
background-color: $orange-2;
box-shadow: inset 0 0 0.25vmin darken($orange-2, 10),
inset 0 0 1vmin rgba($orange-3, 0.15);
}
}
&__back {
&::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 5.25vmin;
transform-origin: bottom;
transform: rotateX(-15deg);
background-color: darken($brown-3, 10);
}
}
&__right {
// background-color: $brown-3;
background-image: linear-gradient(
to top,
darken($brown-3, 10) 1vmin,
$orange-3 1vmin,
$orange-3 2vmin,
darken($brown-3, 5) 2vmin
);
&::before {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
-75deg,
transparent 1.675vmin,
darken($brown-3, 5) 1.675vmin
);
}
}
&__left {
background-color: $brown-1;
background-image: linear-gradient(
to top,
darken($brown-1, 4) 1vmin,
$orange-1 1vmin,
$orange-1 2vmin,
darken($brown-1, 1) 2vmin
);
&::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(
75deg,
transparent 1.675vmin,
$brown-1 1.675vmin
);
}
}
&__top {
background-color: $brown-2;
height: 44.125vmin;
top: -1.4vmin;
}
&__bottom {
background-color: $brown-4;
}
}
.c1 {
$width-el: 20vmin;
$height-el: 10vmin;
$depth-el: 22vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
bottom: -1.35vmin;
left: 0;
transform: translateZ(10vmin);
&__front {
&-a {
display: grid;
grid-template-rows: auto 1fr auto;
position: absolute;
bottom: 0;
width: 100%;
height: 10.45vmin;
transform-origin: bottom;
transform: rotateX(15deg);
background-color: $brown-1;
.f-lights {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: start;
padding: 0.9vmin 0.75vmin 0.6vmin;
}
.f-light {
justify-self: center;
width: 1vmin;
height: 1vmin;
background-color: $orange-2;
border-radius: 0.25vmin;
box-shadow: inset 0 0 0.25vmin darken($orange-2, 10),
inset 0 0 0.5vmin rgba($orange-3, 0.15);
}
.f-window {
width: 100%;
margin: 0.5vmin 0 0.25vmin;
background-image: linear-gradient(
to right,
darken($blue-1, 3),
darken($blue-1, 8)
);
box-shadow: inset 0 0 0.5vmin $blue-2,
inset 0 0 0.75vmin rgba($blue-3, 0.25);
overflow: hidden;
&::before {
content: "";
position: absolute;
width: 100%;
height: 0.675vmin;
background-color: rgba($blue-2, 0.35);
}
.f-reflexa {
position: absolute;
left: 1vmin;
top: 5vmin;
width: 6vmin;
height: 5vmin;
border-radius: 50%;
background-color: rgba($white-1, 0.05);
filter: blur(0.35vmin);
display: none;
}
.f-reflexb {
position: absolute;
top: 0;
left: 0;
width: 1.65vmin;
height: 100%;
border-radius: 0;
background-image: linear-gradient(
to right,
rgba($white-1, 0.075),
rgba($white-1, 0.05)
);
filter: blur(0.1vmin);
}
.f-washers {
position: absolute;
width: 100%;
height: 1.25vmin;
bottom: 0;
background-color: rgba($blue-2, 0.2);
}
.f-washer {
position: absolute;
width: 4vmin;
height: 0.3vmin;
background-color: $black-1;
&:nth-of-type(1) {
transform-origin: bottom right;
right: 52%;
animation: washer-r 800ms cubic-bezier(0.17, 0.67, 0.52, 0.94) alternate
infinite;
}
&:nth-of-type(2) {
transform-origin: bottom left;
left: 51.5%;
animation: washer-l 800ms cubic-bezier(0.17, 0.67, 0.52, 0.94) alternate
infinite;
}
}
}
.f-line {
width: 100%;
height: 0.5vmin;
background-color: $orange-2;
}
}
}
&__back {
background-color: $brown-3;
&::before {
content: "";
position: absolute;
width: calc(100% - 4vmin);
top: 2.85vmin;
left: 2vmin;
height: 6.25vmin;
background-color: $blue-2;
box-shadow: inset 0 0 0.5vmin darken($blue-3, 10),
inset 0 0 1vmin rgba(darken($blue-3, 10), 0.5);
}
}
&__right {
background-image: linear-gradient(
-75deg,
darken($brown-3, 2) 42.5vmin,
transparent 42.5vmin
);
&::before {
content: "";
position: absolute;
top: 0.75vmin;
width: 100%;
height: 1vmin;
background-image: linear-gradient(
-75deg,
$orange-3 40.25vmin,
transparent 40.25vmin
);
}
}
&__left {
background-image: linear-gradient(
75deg,
$brown-1 42.5vmin,
transparent 42.5vmin
);
&::before {
content: "";
position: absolute;
top: 0.75vmin;
width: 100%;
height: 1vmin;
background-image: linear-gradient(
75deg,
$orange-1 40.25vmin,
transparent 40.25vmin
);
}
}
&__top {
background-image: linear-gradient(
to right,
lighten($brown-2, 2),
darken($brown-2, 3)
);
height: 41.25vmin;
}
&__bottom {
background-color: $brown-4;
}
}
.d1-l,
.d1-r {
$width-el: 0.35vmin;
$height-el: 0.5vmin;
$depth-el: 15vmin;
position: absolute;
top: 3vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
transform: translateZ(20.5vmin);
&__front {
background-color: $black-3;
}
&__back {
background-color: $black-1;
}
&__right {
background-color: $black-3;
}
&__left {
background-color: $black-1;
}
&__top {
background-color: $black-1;
}
&__bottom {
background-color: $black-3;
}
}
.d1-l {
left: 1vmin;
&__bottom {
&::before {
content: "";
position: absolute;
top: 1vmin;
right: 0;
width: 2vmin;
height: 28vmin;
border: 0.5vmin solid $brown-3;
border-left-width: 0.9vmin;
transform-origin: bottom right;
transform: translateZ(0.45vmin) skewY(25deg);
}
}
}
.d1-r {
right: 1vmin;
&__bottom {
&::before {
content: "";
position: absolute;
top: 1vmin;
right: 0;
width: 1.5vmin;
height: 28vmin;
border: 0.75vmin solid $brown-3;
border-left-width: 0;
transform-origin: bottom right;
transform: translateZ(0.45vmin) skewY(25deg);
}
}
}
.d1-fa {
$width-el: 0.35vmin;
$height-el: 0.5vmin;
$depth-el: 0.35vmin;
position: absolute;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
transform: translateZ(20vmin);
&__front {
background-color: $black-3;
}
&__back {
background-color: $black-1;
}
&__right {
background-color: $black-3;
}
&__left {
background-color: $black-1;
}
&__top {
background-color: $black-1;
}
&__bottom {
background-color: $black-3;
}
&:nth-of-type(1) {
top: 4vmin;
left: 1vmin;
}
&:nth-of-type(2) {
top: 4vmin;
right: 1vmin;
}
&:nth-of-type(3) {
top: 31vmin;
left: 1vmin;
}
&:nth-of-type(4) {
top: 31vmin;
right: 1vmin;
}
}
// ===========================================
.f-airs {
display: grid;
grid-template-rows: auto;
width: 100%;
height: 100%;
padding: 4vmin;
}
.f-air {
$width-el: 5vmin;
$height-el: 1vmin;
$depth-el: 4vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: 8vmin;
justify-self: center;
transform: translateZ(0.1vmin);
&::before {
content: "";
position: absolute;
width: 120%;
height: 110%;
bottom: 0;
background-image: linear-gradient(
-35deg,
transparent 0.5vmin,
$brown-3 0.5vmin
);
}
&__front {
&::before {
content: "";
position: absolute;
bottom: 0;
transform-origin: bottom left;
transform: rotateX(66deg);
width: 100%;
height: 2.6vmin;
background-image: linear-gradient(to bottom, $white-1, darken($white-1, 3));
}
}
&__back {
background-color: darken($white-3, 8);
}
&__right {
background-image: linear-gradient(
-25deg,
darken($white-3, 4) 3.25vmin,
transparent 3.35vmin
);
}
&__left {
background-image: linear-gradient(
25deg,
$white-2 3.25vmin,
transparent 3.35vmin
);
}
&__top {
background-image: linear-gradient(to right, $white-2, darken($white-2, 3));
height: 5.5vmin;
}
&__bottom {
background-color: $white-2;
}
}
.f-sunr {
width: 4vmin;
height: 4vmin;
justify-self: center;
transform: translateZ(0.1vmin);
box-shadow: inset 0 0 0.25vmin $black-2;
background-image: linear-gradient(
to right,
darken($brown-4, 25),
darken($brown-4, 15)
);
&::before {
content: "";
position: absolute;
left: 100%;
width: 3vmin;
height: 100%;
bottom: 0;
background-image: linear-gradient(-45deg, transparent 2vmin, $brown-3 2vmin);
}
&-t {
position: absolute;
bottom: -0.1vmin;
width: 100%;
height: 100%;
transform-origin: bottom;
transform: rotateX(-70deg);
background-image: linear-gradient(to top, $white-1, darken($white-1, 5));
}
}
.f-hoods {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0.25vmin;
padding-top: 0.5vmin;
}
.f-hood {
$width-el: 6vmin;
$height-el: 0.25vmin;
$depth-el: 1.5vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
justify-self: center;
&__front {
background-color: darken($black-3, 20);
}
&__back {
background-color: darken($black-1, 20);
}
&__right {
background-color: darken($black-3, 20);
}
&__left {
background-color: darken($black-1, 20);
}
&__top {
background: repeating-linear-gradient(
$black-1 0,
$black-1 0.25vmin,
$black-2 0.25vmin,
$black-2 0.35vmin
);
}
&__bottom {
background-color: darken($black-3, 20);
}
}
.f-swindows {
height: 100%;
width: 100%;
padding: 2.85vmin 1vmin 0.8vmin 0;
display: grid;
grid-template-columns: auto auto 2fr auto 1fr 0.5fr;
grid-column-gap: 0.5vmin;
&--reverse {
padding: 2.85vmin 0 0.8vmin 1vmin;
grid-template-columns: auto auto 1fr auto 1.5fr 0.5fr;
direction: rtl;
.f-swindow {
background-color: $blue-1;
box-shadow: inset 0 0 0.35vmin darken($blue-2, 12),
inset 0 0 1vmin rgba(darken($blue-2, 12), 0.5);
&:nth-of-type(1) {
background-image: linear-gradient(
75deg,
$blue-1 2.75vmin,
transparent 2.75vmin
);
}
}
}
}
.f-swindow {
height: 100%;
width: 100%;
background-color: $blue-2;
box-shadow: inset 0 0 0.5vmin darken($blue-3, 10),
inset 0 0 1vmin rgba(darken($blue-3, 10), 0.5);
&:nth-of-type(1) {
width: 3vmin;
background-color: transparent;
background-image: linear-gradient(
-75deg,
$blue-2 2.75vmin,
transparent 2.75vmin
);
box-shadow: none;
}
&:nth-of-type(2) {
width: 5vmin;
}
&:nth-of-type(3) {
height: 50%;
}
&:nth-of-type(4) {
width: 10vmin;
background-color: transparent;
box-shadow: none;
}
}
.f-sdoor {
position: absolute;
top: 1.85vmin;
right: 19vmin;
height: 14vmin;
width: 6vmin;
transform: translateY(1vmin);
background-color: $brown-2;
border-radius: 0.75vmin;
border: 0.1vmin solid $brown-4;
box-shadow: inset 0 0 0.35vmin darken($brown-3, 12),
inset 0 0 1vmin rgba(darken($brown-3, 12), 0.5);
}
.f-a {
$width-el: 0.25vmin;
$height-el: 0.25vmin;
$depth-el: 3.175vmin;
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el * 2;
position: absolute;
left: 50%;
bottom: 1vmin;
transform: translateX(-50%);
&__front {
background-color: $black-1;
}
&__back {
background-color: $black-3;
}
&__right {
background-color: $black-3;
}
&__left {
background-color: $black-1;
}
&__top {
background-color: $black-2;
}
&__bottom {
background-color: $black-3;
}
}
.f-bubble {
position: absolute;
left: 0.5vmin;
top: 0.5vmin;
width: 1vmin;
height: 1vmin;
transform-origin: center;
transform: translateZ(-1vmin) rotateY(90deg) rotateX(90deg);
background-color: $meta;
border-radius: 50%;
animation: bubble 1000ms cubic-bezier(0.17, 0.67, 0.52, 0.94) infinite;
filter: blur(0.25vmin);
@for $var from 1 to 10 {
&:nth-of-type(#{$var}) {
animation-delay: 20ms * $var;
}
}
}
// *********************************
// *********************************
@keyframes shake {
0%,
90%,
100% {
transform: translateY(0);
}
20% {
transform: translateY(1vmin);
}
30% {
transform: translateY(3vmin);
}
40% {
transform: translateY(1.95vmin);
}
50% {
transform: translateY(1vmin);
}
60% {
transform: translateY(1.85vmin);
}
70% {
transform: translateY(0.95vmin);
}
80% {
transform: translateY(-1vmin);
}
}
@keyframes truck {
0%,
20%,
40%,
60%,
80%,
100% {
transform-origin: center;
transform: translateZ(0) rotateY(-0.65deg) rotateX(-0.65deg);
}
10%,
30%,
50%,
70%,
90% {
transform-origin: center;
transform: translateZ(0.125vmin) rotateY(0.5deg) rotateX(0.5deg);
}
}
@keyframes bubble {
0% {
width: 0;
height: 0;
left: 0.5vmin;
top: 0.5vmin;
opacity: 0;
transform: translateZ(-1vmin) rotateY(90deg) rotateX(90deg);
}
20% {
width: 0.25vmin;
height: 0.25vmin;
left: 2vmin;
transform: translateZ(1vmin) rotateY(90deg) rotateX(90deg);
}
30% {
width: 0.5vmin;
height: 1vmin;
left: 3vmin;
transform: translateZ(2vmin) rotateY(90deg) rotateX(90deg);
}
50% {
left: 1.5vmin;
transform: translateZ(3vmin) rotateY(90deg) rotateX(90deg);
}
60% {
width: 2vmin;
height: 3vmin;
left: 5vmin;
transform: translateZ(5vmin) rotateY(90deg) rotateX(90deg);
opacity: 0.75;
}
80% {
width: 1vmin;
height: 2vmin;
left: 6vmin;
transform: translateZ(5.5vmin) rotateY(90deg) rotateX(90deg);
opacity: 0.5;
}
100% {
width: 1vmin;
height: 1.5vmin;
left: 7vmin;
transform: translateZ(7vmin) rotateY(90deg) rotateX(90deg);
opacity: 0.1;
}
}
@keyframes washer-r {
to {
transform: rotateZ(80deg);
}
}
@keyframes washer-l {
to {
transform: rotateZ(-80deg);
}
}
Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/ricardoolivaalonso/pen/LYLEJBK
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
