Ever imagined bringing the legendary Optimus Prime to life in your browser? In this blog, we’ll take on the exciting challenge of designing the iconic Transformer using just HTML and CSS! From sculpting his bold features with CSS shapes and gradients to adding depth with 3D transforms and shadows, we’ll construct a tribute to this heroic leader—all without JavaScript. Perfect for both fans of Transformers and front-end developers eager to explore the power of CSS, this project merges creativity with technical skill. Let’s roll out and start coding!
4o
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 CSS Optimus Prime Toggle w/ Audio 🤙 by Jhey (@jh3y) 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.
<h1>Tap</h1>
<div class="controls">
<label for=speed>
<span>Slow Down?</span>
</label>
<input type="checkbox" id=speed />
</div>
<main>
<div class="scene-jumper">
<div class="scene scene--optimus optimus">
<div class="scene-turner">
<div class="scene-roller">
<!-- Trick here is to map out everything in 2D. -->
<!-- Sections based off of Optimus' core. That's where the power comes from -->
<!-- He has the hips and he can bend forward or backward based on this point -->
<!-- Almost detach the legs as if they aren't there as it's easy to connect them when needed -->
<!-- Torso is where the magic happens. This part spins around on the top of the core. -->
<!-- Does it need to though? It doesn't in real life. Only because it's a toy and physics??? -->
<!-- Maybe we could just have it fold down like the G1 Cartoon??? -->
<div class="optimus__core">
<div class="core core--upper">
<div class="optimus__torso">
<!-- Some other spot here for a number plate or something. Bumper?? -->
<!-- Trick here is to put the torso at the top of the grill-->
<!-- Can always move this later if needed -->
<div class="optimus__top">
<div class="optimus__head">
<div class="optimus__head-door"></div>
<div class="optimus__helmet">
<div class="optimus__head-base"></div>
<div class="optimus__head-reactor">
<div class="optimus__head-twist">
<div class="optimus__neck">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__face">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__mouth">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__ear optimus__ear--left">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__ear optimus__ear--right">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__mohawk">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-top">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-back">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<!-- Each contains the top and bottom part -->
<div
class="optimus__helmet-side optimus__helmet-side--left"
>
<div class="optimus__helmet-side-guard">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-mouth-guard">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div
class="optimus__helmet-side optimus__helmet-side--right"
>
<div class="optimus__helmet-side-guard">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__helmet-mouth-guard">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="optimus__spine">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="chest">
<div class="cuboid">
<div class="cuboid__side">
<div class="cab-light cab-light--left">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="cab-light cab-light--right">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hood">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="cab">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="arms">
<div class="arm arm--right">
<div class="arm-bar">
<div class="arm-cube">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="shoulder-port">
<div class="shoulder-gesture">
<div class="exhaust">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="shoulder">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side">
<img
class="logo"
src="/shared/images/bear-2022--white.svg"
alt=""
/>
</div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="bicep">
<div class="bicep__strut">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm">
<div class="forearm-cradle">
<div class="forearm-gesture">
<div class="forearm-strut">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm-cap">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fist">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div
class="cuboid__side cuboid__side--no-filter"
>
<div class="hand">
<div class="hand__fist">
<div class="cuboid">
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
</div>
</div>
<div class="hand__fingers">
<div class="cuboid">
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
</div>
</div>
</div>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm-shell">
<div class="cuboid">
<div class="cuboid__side">
<img
class="bracket"
src="/shared/images/code-bracket.svg"
alt=""
/>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="arm arm--left">
<div class="arm-bar">
<div class="arm-cube">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="shoulder-port">
<div class="shoulder-gesture">
<div class="exhaust">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="shoulder">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side">
<img
class="logo"
src="/shared/images/bear-2022--white.svg"
alt=""
/>
</div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="bicep">
<div class="bicep__strut">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm">
<div class="forearm-cradle">
<div class="forearm-gesture">
<div class="forearm-flip">
<div class="forearm-strut">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm-cap">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fist">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div
class="cuboid__side cuboid__side--no-filter"
>
<div class="hand">
<div class="cuboid">
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
<div
class="cuboid__side"
></div>
</div>
</div>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="forearm-shell">
<div class="cuboid">
<div class="cuboid__side">
<img
class="bracket"
src="/shared/images/code-bracket.svg"
alt=""
/>
</div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="core core--lower">
<!-- Hips are static. They actually hold the side of the grill which is interesting -->
<!-- The magic of the legs and the side piece of Optimus' grill -->
<div class="optimus__grill-hinge">
<div class="optimus__grill">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="optimus__plate">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="optimus__hips hips">
<div class="optimus__axle">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hip hip--left">
<div class="hip__grill">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hip__flexor">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hip__flexor-low">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="hip hip--right">
<div class="hip__grill">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hip__flexor">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="hip__flexor-low">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
<div class="optimus__belt">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side">
<div class="belt__segments">
<div class="belt__segment"></div>
<div class="belt__segment"></div>
<div class="belt__segment"></div>
<div class="belt__segment"></div>
<div class="belt__segment"></div>
</div>
</div>
</div>
</div>
<div class="optimus__leg leg optimus__leg--left">
<div class="leg__top">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="leg__bottom">
<div class="sock">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wheel-arch">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="tank">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="boot">
<div class="foot">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div
class="holster-wheel holster-wheel--right holster-wheel--rear-one"
>
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
<div
class="holster-wheel holster-wheel--right holster-wheel--rear-two"
>
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
</div>
<div class="holster-wheel holster-wheel--right">
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
</div>
<div class="optimus__leg optimus__leg--right">
<div class="leg__top">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="leg__bottom">
<div class="sock">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wheel-arch">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="tank">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="boot">
<div class="foot">
<div class="cuboid">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div
class="holster-wheel holster-wheel--left holster-wheel--rear-one"
>
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
<div
class="holster-wheel holster-wheel--left holster-wheel--rear-two"
>
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
</div>
<div
class="holster-wheel holster-wheel--left holster-wheel--front"
>
<div class="wheel">
<div style="--index: 0" class="wheel__side"></div>
<div style="--index: 1" class="wheel__side"></div>
<div style="--index: 2" class="wheel__side"></div>
<div style="--index: 3" class="wheel__side"></div>
<div style="--index: 4" class="wheel__side"></div>
<div style="--index: 5" class="wheel__side"></div>
<div style="--index: 6" class="wheel__side"></div>
<div style="--index: 7" class="wheel__side"></div>
<div style="--index: 8" class="wheel__side"></div>
<div style="--index: 9" class="wheel__side"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>CSS Code
Create a file style.css and paste the code below.
label {
font-weight: bold;
cursor: pointer;
display: grid;
}
h1 {
position: fixed;
top: 2rem;
left: 2rem;
margin: 0;
opacity: 0.5;
}
.controls {
transform: translate3d(0, 0, 500vmin);
z-index: 2;
position: fixed;
bottom: 2rem;
right: 2rem;
display: flex;
align-items: center;
accent-color: var(--red-1);
font-weight: bold;
font-size: 1.25rem;
font-family: sans-serif;
gap: 1rem;
}
label span {
display: block;
}
.optimus__head-reactor {
height: 100%;
width: 100%;
}
.optimus__head-reactor {
transform: rotateY(var(--head-turn, 0deg));
}
.scene-turner {
transform: rotateZ(var(--truck-turn, 0deg));
/* transition: transform 0.125s;*/
}
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
touch-action: none;
}
:root {
--size: 4;
--optimus-rotation-y: -24;
--optimus-rotation-x: -32;
/* Optimus Colors */
/* Transition speed */
--transition-speed: 0.2s;
/* Colors */
--blue-1: hsl(215, 100%, 45%);
--blue-2: hsl(215, 100%, 40%);
--blue-3: hsl(215, 100%, 35%);
--blue-4: hsl(215, 100%, 30%);
--blue-5: hsl(215, 100%, 25%);
--grey-1: hsl(228, 3%, 65%);
--grey-2: hsl(228, 3%, 60%);
--grey-3: hsl(228, 3%, 55%);
--grey-4: hsl(228, 3%, 50%);
--grey-5: hsl(228, 3%, 45%);
--red-1: hsl(0, 74%, 50%);
--red-2: hsl(0, 74%, 45%);
--red-3: hsl(0, 74%, 40%);
--red-4: hsl(0, 74%, 35%);
--red-5: hsl(0, 74%, 30%);
--eye-blue: hsl(210 100% 70%);
--orange: hsl(42, 99%, 45%);
/* Sizing and random stuff */
--size: 5;
--cab-width: calc(var(--size) * 3.6vmin);
--cab-multiplier: 3.6;
--torso-depth: calc(var(--size) * 2.6);
--core-height: calc((var(--size) * 1 / 3) * 1);
--chest-depth: calc(var(--torso-depth) * 0.6);
--fist-dimension: calc((var(--size) * var(--cab-multiplier) - var(--size)) / 2);
--fist-width: calc(((var(--size) * var(--cab-multiplier) - var(--size)) / 2) * 1vmin);
--grill-height: calc(((var(--size) / 3) * 3.5) * 1vmin);
--cab-height: calc(var(--grill-height) * 1.4);
--wheel-depth: calc(var(--size) * 0.4);
--leg-height: calc(var(--size) * 6.4);
/* --truck-turn: calc(20deg * var(--rotate, 0));*/
}
[data-transformed=true] {
--truck-turn: calc(20deg * var(--rotate, 0));
}
[data-transformed=false] {
--head-turn: calc(20deg * var(--rotate, 0));
}
body {
display: grid;
place-items: center;
min-height: 100vh;
overflow: hidden;
background: hsl(210 20% 88%);
}
.scene {
position: relative;
}
.optimus {
}
.optimus * {
position: absolute;
}
/* Remember: The core is based on 3.5 x 6 so percentages can base off that. */
.optimus__core {
width: calc(var(--size) * 1vmin);
aspect-ratio: 3 / 1;
translate: -50% -50%;
}
.core {
height: 100%;
width: 100%;
}
.optimus__torso {
width: 100%;
height: 400%;
bottom: 50%;
}
.optimus__grill {
--color: var(--grey-1);
width: 100%;
bottom: 100%;
height: var(--grill-height);
--depth: calc(var(--torso-depth) * 1);
}
.optimus__grill .cuboid {
/* transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));*/
}
.optimus__grill .cuboid__side:nth-of-type(6),
.optimus__grill .cuboid__side:nth-of-type(5) {
background: repeating-linear-gradient(var(--grey-1) 0 10%, var(--grey-5) 15% 15%);
}
.optimus__top {
width: var(--cab-width);
height: var(--cab-height);
bottom: 100%;
left: 50%;
translate: -50% 0;
}
@keyframes breathe {
50% {
transform: translateY(-2%);
}
}
.reference-box {
height: 100%;
width: 100%;
--depth: var(--torso-depth);
--color: hsl(0 100% 50% / 0.25);
}
.reference-box .cuboid__side {
border: 1px solid white;
}
.exhaust {
height: 200%;
bottom: 10%;
width: calc(var(--fist-width) * 0.2);
--depth: calc(var(--fist-dimension) * 0.2);
--color: var(--grey-3);
}
.arm--right .exhaust {
left: 100%;
}
.arm--left .exhaust {
right: 100%;
}
.chest {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));
--depth: var(--chest-depth);
--color: var(--red-1);
}
.chest > .cuboid > .cuboid__side:nth-of-type(1) {
--h-stop-one: calc(50% - (var(--fist-width) * 0.5));
--h-stop-two: calc(50% + (var(--fist-width) * 0.5));
--v-stop-one: calc(var(--torso-depth) * 0.1vmin);
--v-stop-two: calc(100% - (var(--torso-depth) * 0.1vmin));
filter: none;
background:
linear-gradient(90deg, var(--red-1) 0 var(--h-stop-one), transparent var(--h-stop-one) var(--h-stop-two), var(--red-1) var(--h-stop-two)),
linear-gradient(var(--red-1) 0 var(--v-stop-one), transparent var(--v-stop-one) var(--v-stop-two), var(--red-1) var(--v-stop-two));
}
.chest > .cuboid > .cuboid__side:nth-of-type(2),
.chest > .cuboid > .cuboid__side:nth-of-type(4) {
background: linear-gradient(var(--red-1) 80%, var(--grey-1) 80%);
}
.chest > .cuboid > .cuboid__side:nth-of-type(2):after,
.chest > .cuboid > .cuboid__side:nth-of-type(4):after {
content: "";
height: 60%;
left: 4%;
top: 10%;
position: absolute;
background: var(--blue-5);
border: calc(var(--torso-depth) * 0.05vmin) solid var(--grey-3);
}
.logo {
width: 75%;
top: 50%;
left: 50%;
translate: -50% -50%;
opacity: 0.8;
}
.hood {
height: 20%;
width: 100%;
bottom: 0;
--depth: calc(var(--torso-depth) * 0.1);
--color: var(--grey-1);
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.45vmin));
}
.cab {
height: 80%;
width: 100%;
top: 0;
--depth: calc(var(--torso-depth) * 0.1);
--color: var(--red-1);
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.45vmin));
}
.cab-light {
height: 16%;
width: 20%;
bottom: 0%;
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.05vmin));
--depth: calc(var(--torso-depth) * 0.1);
--color: var(--red-1);
}
.cab-light .cuboid__side:nth-of-type(3) {
background: radial-gradient(circle at 25% center, white 16%, transparent 16%),
radial-gradient(circle at 75% center, white 16%, transparent 16%),
var(--red-1);
}
.cab-light--left {
left: 10%;
}
.cab-light--right {
right: 10%;
}
.cab .cuboid .cuboid__side:nth-of-type(2),
.cab .cuboid__side:nth-of-type(4) {
filter: none !important;
}
.cab .cuboid__side:nth-of-type(2):after,
.cab .cuboid__side:nth-of-type(4):after {
content: "";
position: absolute;
height: 40%;
left: 50%;
width: 80%;
top: 26%;
background: var(--grey-2);
transform-origin: 0 50%;
transform: rotateY(-70deg);
}
.cab .cuboid__side:nth-of-type(4):after {
transform: rotateY(70deg);
}
.cab .cuboid__side:nth-of-type(5):after,
.cab .cuboid__side:nth-of-type(5):before {
position: absolute;
content: "";
width: 40%;
height: 70%;
top: 50%;
translate: 0 -50%;
background: var(--blue-5);
border: calc(var(--cab-height) * 0.05) solid var(--grey-1);
}
.cab .cuboid__side:nth-of-type(5):after {
left: 55%;
}
.cab .cuboid__side:nth-of-type(5):before {
background: linear-gradient(-40deg, transparent 0 50%, hsl(0 0% 100% / 0.75) 50% 70%, transparent 70% 80%, hsl(0 0% 100% / 0.75) 80% 90%, transparent 90%), var(--blue-5);
right: 55%;
}
.cab .cuboid__side:nth-of-type(6) {
display: none;
}
.optimus__spine {
height: 100%;
width: calc(100% - (2 * var(--fist-width)));
left: 50%;
translate: -50% 0;
transform: translate3d(0, 0, calc(var(--torso-depth) * -0.35vmin));
--depth: calc(var(--torso-depth) * 0.3);
--color: var(--red-2);
}
.optimus__head {
width: var(--fist-width);
height: var(--cab-height);
left: 50%;
translate: -50% 0;
top: 0;
}
.optimus__helmet {
height: 100%;
width: 100%;
}
.optimus__neck {
bottom: 0;
left: 50%;
height: 12%;
width: 50%;
translate: -50% 0;
--depth: calc(var(--head-depth) * 0.5);
--color: var(--grey-4);
}
.optimus__face {
bottom: 12%;
width: 60%;
height: 46%;
left: 50%;
translate: -50% 0;
--depth: calc(var(--head-depth) * 0.5);
--color: var(--grey-5);
}
.optimus__face .cuboid__side:nth-of-type(5):after {
content: "";
height: 14%;
left: 50%;
translate: -50% -50%;
background: linear-gradient(90deg, var(--eye-blue) 0 40%, transparent 20% 60%, var(--eye-blue) 60%);
top: 20%;
position: absolute;
width: 80%;
}
.optimus__mouth {
top: 58%;
width: 60%;
height: 32%;
left: 50%;
translate: -50% 0;
transform: translate3d(0, 0, calc(var(--head-depth) * 0.3vmin));
--depth: calc(var(--head-depth) * 0.2);
--color: var(--grey-2);
}
.optimus__mouth .cuboid__side:nth-of-type(5) {
background: linear-gradient(-90deg, var(--grey-2) 50%, var(--grey-4) 50.5%);
}
.optimus__ear {
height: 80%;
top: 1%;
width: 10%;
--depth: calc(var(--head-depth) * 0.2);
--color: var(--blue-4);
}
.optimus__ear--left {
left: 0%;
}
.optimus__ear--right {
right: 0%;
}
.optimus__mohawk {
width: 25%;
height: 25%;
left: 50%;
translate: -50% 0;
bottom: 58%;
--depth: calc(var(--head-depth) * 1);
--color: var(--blue-2);
}
.optimus__helmet-side-guard {
width: 100%;
height: 100%;
transform: translate3d(0, 0, calc(var(--head-depth) * -0.15vmin));
--depth: calc(var(--head-depth) * 0.6);
--color: var(--blue-3);
}
.optimus__helmet-mouth-guard {
width: 100%;
bottom: 0;
height: 50%;
--depth: calc(var(--head-depth) * 1);
--color: var(--blue-4);
}
.optimus__helmet-back {
width: 70%;
bottom: 12%;
height: 58%;
left: 50%;
translate: -50% 0;
transform: translate3d(0, 0, calc(var(--head-depth) * -0.36vmin));
--depth: calc(var(--head-depth) * 0.2);
--color: var(--blue-3);
}
.optimus__helmet-top {
height: 12%;
width: 70%;
left: 50%;
translate: -50% 0;
bottom: 58%;
--depth: calc(var(--head-depth) * 0.8);
--color: var(--blue-1);
}
.optimus__helmet-side {
bottom: 12%;
width: 10%;
height: 50%;
}
.optimus__helmet-side--left {
left: 10%;
}
.optimus__helmet-side--right {
right: 10%;
}
.optimus__head {
--head-depth: calc(var(--torso-depth) * 0.4);
}
.optimus__head .reference-box {
--depth: calc(var(--torso-depth) * 0.4);
}
/* Arms are interesting, gotta be rotate off of a spindle etc. */
.arms {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));
}
.arm {
height: 20%;
width: var(--fist-width);
top: calc(var(--fist-width) * 0.5);
}
.arm-bar {
position: absolute;
left: 0;
height: 100%;
width: 100%;
}
.arm-cube {
height: 100%;
width: 100%;
--depth: calc(var(--torso-depth) * 0.1);
--color: var(--grey-4);
}
.arm--right .arm-bar {
left: 0;
}
.arm--left .arm-bar {
right: 0;
}
.shoulder-port {
width: var(--fist-width);
aspect-ratio: 1;
top: 50%;
/* translate: calc(var(--torso-depth) * -0.1vmin) -50%;*/
transform-origin: 0 50%;
}
.shoulder-gesture {
height: 100%;
width: 100%;
}
.arm--right .shoulder-port {
left: 100%;
}
.arm--left .shoulder-port {
right: 100%;
}
.shoulder {
height: 100%;
width: 100%;
--depth: var(--fist-dimension);
--color: var(--red-1);
}
.bicep {
width: 100%;
height: calc(var(--cab-height) + var(--grill-height));
top: 0%;
left: 50%;
translate: -50% 0;
}
.bicep__strut {
--depth: calc(var(--fist-dimension) * 0.4);
--color: var(--grey-2);
width: 40%;
height: calc(100% - (var(--fist-width) * 0.6));
left: 50%;
top: calc(var(--fist-width) * 0.2);
translate: -50% 0;
}
.arm--right .forearm {
right: 0;
}
.arm--left .forearm {
left: 0;
}
.forearm {
height: calc(var(--grill-height) * 1);
bottom: 0;
width: calc((var(--torso-depth) * 0.7vmin) + var(--fist-width));
}
:is(.forearm-cradle, .forearm-gesture) {
height: 100%;
width: 100%;
}
.forearm-cap {
width: 18%;
height: 100%;
left: 62%;
--depth: calc(var(--fist-dimension) * 0.75);
--color: var(--red-5);
}
.forearm-shell {
width: 90%;
height: 100%;
right: 0;
z-index: 2;
--color: var(--red-1);
--depth: var(--fist-dimension);
}
.forearm-shell .cuboid__side:nth-of-type(4) {
display: none;
}
.forearm-shell .cuboid__side:nth-of-type(3) {
mask: linear-gradient(90deg, white 10%, transparent 10% 58%, white 58%);
}
.forearm-shell .cuboid__side:nth-of-type(6),
.forearm-shell .cuboid__side:nth-of-type(5) {
clip-path: polygon(0 0, 0% 100%, 12% 100%, 16% 55%, 54% 55%, 58% 100%, 100% 100%, 100% 0);
}
.forearm-shell .cuboid__side:nth-of-type(6) {
--b: 0.7;
clip-path: polygon(100% 0, 100% 100%, 88% 100%, 84% 55%, 46% 55%, 42% 100%, 0% 100%, 0 0);
}
.forearm-strut {
width: 70%;
height: calc(var(--fist-width) * 0.32);
right: calc(var(--fist-width) * 0.5);
top: 50%;
translate: 0 -50%;
--depth: calc(var(--fist-dimension) * 0.32);
--color: var(--grey-3);
}
.fist {
height: 100%;
left: 10%;
width: 10%;
top: 0%;
transform-origin: 0 50%;
--depth: var(--fist-dimension);
--color: var(--red-2);
}
.fist > .cuboid > .cuboid__side:nth-of-type(3) {
--b: 1.1;
background: var(--red-1);
}
.fist > .cuboid > .cuboid__side:nth-of-type(2):after {
content: "";
position: absolute;
height: 30%;
width: 60%;
top: 50%;
left: 50%;
translate: -50% -50%;
border: calc(var(--cab-height) * 0.05) solid var(--grey-1);
}
.hand {
top: 50%;
left: 50%;
width: 50%;
aspect-ratio: 1;
translate: -50% -50%;
rotate: -20deg;
transform: translate3d(0, 0, calc(var(--fist-dimension) * -0.25vmin));
--depth: calc(var(--fist-dimension) * 0.5);
--color: var(--blue-5);
}
.arm--left .hand {
rotate: 20deg;
}
/* Lower half things */
.core--lower {
width: var(--cab-width);
height: 100%;
translate: -50% 0;
left: 50%;
}
/*2.5x8*/
.optimus__hips {
width: 100%;
height: 100%;
}
.hip {
position: absolute;
width: var(--fist-width);
aspect-ratio: 1;
bottom: 50%;
}
.optimus__axle {
height: 100%;
width: calc(100% - (var(--size) * 0.4vmin));
background: yellow;
left: 50%;
translate: -50% 0;
--depth: var(--core-height);
--color: var(--grey-4);
}
.hip__grill {
height: calc(var(--core-height) * 1vmin);
width: 100%;
transform: translate3d(0, 0, calc(var(--core-height) * 0.5vmin));
top: 0;
--depth: calc(var(--core-height) * 2);
--color: var(--grey-4);
}
.hip__grill .cuboid__side:nth-of-type(1):after {
content: "";
height: 25%;
width: 25%;
background: var(--orange);
position: absolute;
top: 50%;
translate: 0 -50%;
}
.hip--left .hip__grill .cuboid__side:nth-of-type(1):after {
left: 10%;
}
.hip--right .hip__grill .cuboid__side:nth-of-type(1):after {
right: 10%;
}
.hip__flexor {
top: calc(var(--core-height) * 1vmin);
height: calc(var(--core-height) * 0.9vmin);
transform: translate3d(0, 0, calc(var(--core-height) * 0.5vmin));
width: 100%;
--depth: calc(var(--core-height) * 2);
--color: var(--red-4);
}
.hip__flexor .cuboid__side:nth-of-type(2),
.hip__flexor .cuboid__side:nth-of-type(4) {
background: var(--grey-4);
}
.hip__flexor-low {
top: calc(var(--core-height) * 1vmin);
width: 60%;
bottom: 0;
--depth: var(--core-height);
--color: var(--red-4);
}
.hip--right .hip__flexor-low {
left: 0;
}
.hip--left .hip__flexor-low {
right: 0;
}
/*.hip--right .hip__flexor .cuboid__side:nth-of-type(2) {
background: linear-gradient(var(--red-4) 0 30%, transparent 30%);
}
.hip--right .hip__flexor .cuboid__side:nth-of-type(5) {
clip-path: polygon(0 0, 100% 0%, 100% 20%, 60% 100%, 0% 100%);
}*/
.hip--right {
right: 0;
}
.hip--left {
left: 0;
}
.holster-wheel {
width: calc(var(--size) * 1.25vmin);
aspect-ratio: 1;
top: calc(var(--core-height) * 0.5vmin);
transform: translateY(0%) rotateY(90deg);
--depth: var(--wheel-depth);
}
.holster-wheel--rear-one {
top: 40%;
}
.holster-wheel--rear-two {
top: 75%;
}
.wheel {
transform: translate3d(0, 0, calc(var(--depth) * 0.5vmin));
height: 100%;
width: 100%;
}
.leg__bottom .holster-wheel--left .wheel {
transform: translate3d(0, 0, calc(var(--depth) * 1vmin));
}
.leg__bottom .holster-wheel--right .wheel {
transform: translate3d(0, 0, calc(var(--depth) * -0vmin));
}
.wheel__side {
height: 100%;
width: 100%;
background: black;
border-radius: 50%;
transform: translate3d(0, 0, calc((var(--depth) * -0.1vmin) * var(--index)));
}
.wheel:before,
.wheel:after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at center, var(--grey-1) 30%, transparent 30.5%),
radial-gradient(circle at center, silver 40%, black 40.5%) black;
}
.wheel:before {
transform: translate3d(0, 0, calc(var(--depth) * -1vmin));
}
.holster-wheel--right {
left: 0;
translate: -50% -50%;
}
.holster-wheel--left {
right: 0;
translate: 50% -50%;
}
.optimus__leg {
transform-origin: 50% 0;
height: calc(var(--leg-height) * 1vmin);
width: 50%;
}
.optimus__leg--left {
left: 0;
}
.optimus__leg--right {
right: 0;
}
/* Upper half things */
.optimus__grill-hinge {
width: calc(var(--size) * 1vmin);
height: 100%;
translate: -50% 0;
transform-origin: 50% 50%;
left: 50%;
}
.optimus__plate {
width: 100%;
height: 200%;
transform: translate3d(0, 0, calc((var(--torso-depth) * 0.45vmin) - (var(--core-height) * 0.5vmin))) rotateX(0deg);
--depth: calc(var(--core-height) * 2);
--color: var(--grey-1);
}
.optimus__plate .cuboid__side:nth-of-type(5):after {
content: "JH3YY";
font-family: monospace;
font-weight: bold;
padding: calc(var(--core-height) * 0.2vmin);
background: var(--blue-5);
color: var(--orange);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.tank {
height: 24%;
width: calc(var(--wheel-depth) * 1vmin);
top: 0;
translate: 0 -25%;
--depth: calc(var(--wheel-depth) * 1);
--color: var(--grey-4);
}
.tank .cuboid__side:nth-of-type(2),
.tank .cuboid__side:nth-of-type(4) {
background: repeating-linear-gradient(90deg, var(--grey-3) 0 15%, var(--grey-5) 15% 20%);
}
.optimus__leg--left .tank {
right: 100%;
}
.optimus__leg--right .tank {
left: 100%;
}
.boot {
width: 100%;
height: 16%;
bottom: 0;
left: 50%;
translate: -50% 0;
--depth: calc(var(--size) * 1);
--color: var(--blue-5);
}
.foot {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--size) * -0.5vmin));
}
.optimus__belt {
width: calc(100% - (var(--wheel-depth) * 1.5vmin));
height: 260%;
left: 50%;
translate: -50% 0;
transform: translate3d(0, 0, calc(var(--size) * -0.5vmin));
--depth: calc(var(--size) * 1);
--color: var(--grey-4);
}
.belt__segments {
height: 100%;
width: 100%;
display: grid;
grid-template: 1fr 1fr / 1fr 2fr 1fr;
gap: calc(var(--core-height) * 0.25vmin);
padding: calc(var(--core-height) * 0.5vmin);
}
.belt__segment {
position: static;
background: var(--orange);
width: 100%;
height: 100%;
max-width: 100%;
}
.belt__segment:nth-of-type(2) {
grid-row: span 2;
}
.belt__segment:nth-of-type(4) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);
}
.belt__segment:nth-of-type(5) {
clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}
/*.optimus__leg--right .foot {
translate: calc(-50% - (var(--wheel-depth) * -0.25vmin)) 0;
}
.optimus__leg--left .foot {
translate: calc(-50% - (var(--wheel-depth) * 0.25vmin)) 0;
}*/
.wheel-arch {
height: 75%;
width: 100%;
top: 20%;
transform: translate3d(0, 0, calc(var(--size) * -0.65vmin));
--color: var(--blue-5);
--depth: calc(var(--size) * 0.5);
}
.wheel-arch .cuboid__side:nth-of-type(5) {
display: none;
}
.optimus__leg--right .wheel-arch .cuboid__side:nth-of-type(2),
.optimus__leg--left .wheel-arch .cuboid__side:nth-of-type(4) {
background:
linear-gradient(270deg, var(--blue-5) 45%, transparent 20%),
linear-gradient(var(--blue-5) 5%, transparent 5% 95%, var(--blue-5) 95%);
}
.optimus__leg--right .wheel-arch .cuboid__side:nth-of-type(6):after,
.optimus__leg--left .wheel-arch .cuboid__side:nth-of-type(6):after {
content: "";
width: 40%;
height: 70%;
background:
repeating-linear-gradient(var(--grey-4) 0 2%, var(--grey-1) 2% 10%),
var(--grey-1);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -60%;
}
.optimus__leg--left .wheel-arch {
translate: calc(var(--wheel-depth) * -0.5vmin) 0;
left: 0;
}
.optimus__leg--right .wheel-arch {
translate: calc(var(--wheel-depth) * 0.5vmin) 0;
right: 0;
}
.leg__top {
width: calc(100% - (var(--wheel-depth) * 2vmin));
width: calc(var(--size) * 0.9vmin);
height: 40%;
left: 50%;
translate: -50% 0;
--depth: calc(var(--size) * 0.9);
--color: var(--grey-2);
}
.leg__bottom {
top: 40%;
width: calc(100% - (var(--wheel-depth) * 1vmin));
height: 60%;
left: 50%;
translate: -50% 0;
--depth: calc(var(--size) * 1.1);
--color: var(--blue-4);
}
.sock {
height: 100%;
width: 100%;
}
/* Cuboid boilerplate code */
.cuboid {
width: 100%;
height: 100%;
position: relative;
}
.cuboid__side--no-filter {
filter: none !important;
}
.cuboid__side {
background: var(--color);
filter: brightness(var(--b, 1));
position: absolute;
}
.cuboid__side:nth-of-type(1) {
--b: 1.1;
height: calc(var(--depth, 20) * 1vmin);
width: 100%;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
--b: 0.9;
height: 100%;
width: calc(var(--depth, 20) * 1vmin);
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
--b: 0.5;
width: 100%;
height: calc(var(--depth, 20) * 1vmin);
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
--b: 1;
height: 100%;
width: calc(var(--depth, 20) * 1vmin);
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
--b: 0.8;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin));
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
--b: 1.2;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5vmin)) rotateY(180deg);
top: 0;
left: 0;
}
/* START MOVING PARTS */
.optimus__head-door {
background: var(--red-1);
height: calc(var(--torso-depth) * 0.42vmin);
width: 102%;
transform-origin: 50% 0;
transform: rotateX(90deg) translateY(calc(var(--torso-depth) * -0.1vmin));
}
.optimus__head-base {
height: calc(var(--torso-depth) * 0.4vmin);
width: 100%;
background: var(--red-5);
transform-origin: 50% 100%;
transform: rotateX(90deg) translateY(50%);
bottom: 0;
}
/*.arm {
transform: rotateY(calc(var(--optimus-arm, 0) * 90deg));
}*/
.arm--right {
translate: 50% -50%;
right: 0;
transform-origin: 0 50%;
}
.arm--left {
left: 0;
transform-origin: 100% 50%;
translate: -50% -50%;
}
.arm--right {
--arm-destination: 90deg;
--arm-tilt: 89deg;
--shoulder-multiplier: -0.1vmin;
--bar-multiplier: -0.1;
}
.arm--left {
/* --forearm-start: -180deg;*/
--arm-destination: -90deg;
--arm-tilt: -89deg;
--shoulder-multiplier: 0.1vmin;
--bar-multiplier: 0.1;
}
.arm--right .forearm {
transform-origin: calc(100% - (var(--fist-width) * 0.5)) 50%;
}
.arm--left .forearm {
transform-origin: calc(var(--fist-width) * 0.5) 50%;
}
.forearm-flip {
height: 100%;
width: 100%;
transform: rotateY(180deg);
}
.bracket {
width: 25%;
rotate: 90deg;
top: 50%;
left: 50%;
translate: -100% -50%;
opacity: 0.8;
}
.arm--right :is(.forearm-cradle, .forearm-gesture) {
transform-origin: calc(100% - (var(--fist-width) * 0.5)) 50%;
}
.arm--left :is(.forearm-cradle, .forearm-gesture) {
transform-origin: calc(var(--fist-width) * 0.5) 50%;
}
/* Window sizing */
:root {
--transform: 1;
}
[data-transformed=false] {
--transform: 0;
}
[data-transformed=true] {
--transform: 1;
}
/* END ARM MOVING PARTS */
/* Transition stuff... */
/* List of things that are moving */
/**
* 1. .boot
* 2. .chest .cuboid__side:nth-of-type(2,4):after === Windows
* 3. .forearm-shell === slight rotation for face on view...?
* 4. .forearm-shell .cuboid__side:nth-of-type(2) === Forearm shell arm clipping BACK CAP
* 5. .forearm-shell .cuboid__side:nth-of-type(1) === Forearm shell arm clipping TOP ELBOW SLOT
* 6. .forearm-cradle === ARM TURNING DOWN AT THE ELBOW
* 7. .forearm === ARM TURNING OUT AT THE ELBOW
* 8. .arm === Turning the arms back into the cab
* 9. .arm-bar === Moving the bar on a translation and tucking it in
* 10. .fist === Spinning the fist around
* 11. .core-upper === Hip tilt
* 12. grill__hinge === Hip tilt
* 13. .optimus__helmet === Head popping up. Make sure to transition trapdoor as well for this
* 14. .core-lower === Hip spin */
/**/
:root {
--transition-speed: 0.35s;
}
.scene--optimus {
transform:
translate3d(0, calc(((1 - var(--transform)) * (var(--leg-height)) * 0.45) * -1vmin), 200vmin)
rotateX(calc(var(--optimus-rotation-y, 0) * 1deg))
rotateY(calc(var(--optimus-rotation-x, 0) * 1deg))
rotateX(calc(var(--transform, 0) * -90deg))
scale(var(--optimus-scale, 1))
scaleZ(var(--optimus-scale, 1));
}
.core--lower {
transform: rotateY(calc((1 - var(--transform)) * -180deg));
}
.fist > .cuboid > .cuboid__side:nth-of-type(2):after {
background: hsl(0 0% calc(((80 + (var(--transform) * 20)) * 1%)));
}
.boot {
transform: translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateX(calc(var(--transform) * 120deg));
}
.chest .cuboid__side:nth-of-type(2):after,
.chest .cuboid__side:nth-of-type(4):after {
width: calc(30% + (var(--transform) * 20%));
}
.forearm-cradle {
transform: rotate(calc((1 - var(--transform, 0)) * (var(--arm-destination) * -1)));
}
/*.arm--left .forearm-gesture {
rotate: -60deg;
}
.arm--right .forearm-gesture {
rotate: 60deg;
}*/
.forearm-shell .cuboid__side:nth-of-type(2) {
clip-path: inset(calc((1 - var(--transform, 0)) * 100%) 0 0 0);
}
.forearm-shell .cuboid__side:nth-of-type(1) {
--b: 0.9;
clip-path: inset(0 calc((1 - var(--transform)) * 25%) 0 0);
}
.fist {
rotate: calc(var(--transform) * -180deg);
}
.shoulder-port {
translate: calc((var(--torso-depth) * (var(--transform, 0) * var(--bar-multiplier))) * 1vmin) -50%;
}
.arm {
transform: rotateY(calc(var(--transform) * var(--arm-destination)));
}
.arm-bar {
translate: calc((var(--torso-depth) * (var(--transform) * var(--bar-multiplier))) * 1vmin);
}
.forearm {
transform: rotateY(calc((1 - var(--transform, 0)) * (var(--arm-tilt))));
}
.optimus__head-door {
clip-path: inset(0 0 calc((1 - var(--transform, 0)) * 100%) 0);
}
.optimus__helmet {
transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin)) translateY(calc((1 - var(--transform, 0)) * -100%));
}
.optimus__head-twist {
height: 100%;
width: 100%;
transform: rotateY(calc((1 - var(--transform)) * 25deg));
}
.core--upper {
transform-origin: 50% 50%;
transform: rotateX(calc(var(--transform) * 90deg));
}
.arm--right .forearm-gesture {
rotate: calc((1 - var(--transform)) * 70deg);
}
.arm--right .shoulder-gesture {
transform: rotateX(calc((1 - var(--transform)) * 20deg)) rotateY(calc((1 - var(--transform)) * 20deg)) rotate(calc((1 - var(--transform)) * -10deg));
}
.arm--right .hand {
rotate: calc(-20deg + ((1 - var(--transform)) * -80deg)) ;
}
.arm--left .shoulder-gesture {
transform: rotateX(calc((1 - var(--transform)) * 10deg)) rotateY(calc((1 - var(--transform)) * -20deg)) rotate(calc((1 - var(--transform)) * 16deg));
}
.arm--left .forearm-gesture {
rotate: calc((1 - var(--transform)) * -20deg);
}
.hand__fist {
height: 100%;
width: 100%;
}
.hand__fingers {
width: 150%;
height: 25%;
background: orange;
left: 50%;
translate: -50% 50%;
--depth: calc(var(--fist-dimension) * 0.25);
}
.optimus__grill-hinge {
transform: rotateX(calc(var(--transform) * 90deg));
}
/* Plan out the desired order and choreography on :checked here */
/* These are the transitions when moving to lorry position */
[data-transformed=false] :is(.scene-roller) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 0);
}
[data-transformed=false] .fist > .cuboid > .cuboid__side:nth-of-type(2):after {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 1),
clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
rotate var(--transition-speed) calc(var(--transition-speed) * 1),
translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
[data-transformed=false] :is(.arm-bar, .forearm) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 1),
clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
rotate var(--transition-speed) calc(var(--transition-speed) * 1),
translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
[data-transformed=false] .chest .cuboid__side:nth-of-type(2):after,
[data-transformed=false] .chest .cuboid__side:nth-of-type(4):after {
transition:
width var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
[data-transformed=false] :is(.arm, .shoulder-port, .optimus__head-door, .fist, .forearm-shell .cuboid__side:nth-of-type(1), .forearm-shell .cuboid__side:nth-of-type(2), .boot) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 1.5),
clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5),
rotate var(--transition-speed) calc(var(--transition-speed) * 1.5),
translate var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
[data-transformed=false] :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 2),
clip-path var(--transition-speed) calc(var(--transition-speed) * 2),
rotate var(--transition-speed) calc(var(--transition-speed) * 2),
translate var(--transition-speed) calc(var(--transition-speed) * 2);
}
[data-transformed=false] :is(.forearm-cradle, .core--lower, .scene--optimus) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 2.5),
clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5),
rotate var(--transition-speed) calc(var(--transition-speed) * 2.5),
translate var(--transition-speed) calc(var(--transition-speed) * 2.5);
}
/* Extras... */
[data-transformed=false] :is(.arm--right .forearm-gesture, .arm--right .shoulder-gesture, .arm--left .shoulder-gesture, .arm--left .forearm-gesture, .arm--right .hand, .optimus__head-twist) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 3.5),
clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5),
rotate var(--transition-speed) calc(var(--transition-speed) * 3.5),
translate var(--transition-speed) calc(var(--transition-speed) * 3.5);
}
/* Back to being a transformer */
[data-transformed=true] :is(.forearm-cradle, .core--lower, .scene--optimus, .arm--right .forearm-gesture, .arm--right .shoulder-gesture, .arm--right .hand, .arm--left .shoulder-gesture, .arm--left .forearm-gesture, .optimus__head-twist) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 0),
clip-path var(--transition-speed) calc(var(--transition-speed) * 0),
rotate var(--transition-speed) calc(var(--transition-speed) * 0),
translate var(--transition-speed) calc(var(--transition-speed) * 0);
}
[data-transformed=true] :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 1),
clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
rotate var(--transition-speed) calc(var(--transition-speed) * 1),
translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
[data-transformed=true] .chest .cuboid__side:nth-of-type(2):after,
[data-transformed=true] .chest .cuboid__side:nth-of-type(4):after {
transition:
width var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
[data-transformed=true] :is(.arm, .shoulder-port, .optimus__head-door, .fist, .forearm-shell .cuboid__side:nth-of-type(1), .forearm-shell .cuboid__side:nth-of-type(2), .boot) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 1.5),
clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5),
rotate var(--transition-speed) calc(var(--transition-speed) * 1.5),
translate var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
[data-transformed=true] :is(.arm-bar, .forearm) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 2),
clip-path var(--transition-speed) calc(var(--transition-speed) * 2),
rotate var(--transition-speed) calc(var(--transition-speed) * 2),
translate var(--transition-speed) calc(var(--transition-speed) * 2);
}
[data-transformed=true] .fist > .cuboid > .cuboid__side:nth-of-type(2):after {
transition:
background var(--transition-speed) calc(var(--transition-speed) * 4),
transform var(--transition-speed) calc(var(--transition-speed) * 4),
clip-path var(--transition-speed) calc(var(--transition-speed) * 4),
rotate var(--transition-speed) calc(var(--transition-speed) * 4),
translate var(--transition-speed) calc(var(--transition-speed) * 4);
}
[data-transformed=true] .scene-roller {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 4.5);
}
/*:root:has(:checked) :is(.scene--optimus) {
transition:
transform var(--transition-speed) calc(var(--transition-speed) * 3),
clip-path var(--transition-speed) calc(var(--transition-speed) * 3),
rotate var(--transition-speed) calc(var(--transition-speed) * 3),
translate var(--transition-speed) calc(var(--transition-speed) * 3);
}*/
/* Hack to get the arms to show at rotation */
/*.arm--left .forearm-shell {
transform: rotateY(calc(1deg + ((1 - var(--transform)) * 1deg)));
}
.forearm-shell {
transform: rotateY(calc(-1deg + ((1 - var(--transform)) * 1deg)));
}*/
/* Random animations */
.scene-roller {
transform: translate3d(0, calc((var(--transform)) * (var(--leg-height) * -0.4vmin)), 0vmin);
}
[data-transformed=false] .scene-jumper {
animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5);
}
[data-transformed=false] .arm--right .hand {
animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear;
}
@keyframes ehhh {
50% { transform: rotateZ(-35deg); }
}
@keyframes jump {
50% {
transform: translateY(calc(var(--core-height) * -10vmin));
}
}
.optimus__mouth {
animation: mouth-breathe 3s infinite linear;
}
.optimus__face .cuboid__side:nth-of-type(5):after {
animation: blink 6s -2s infinite;
}
@keyframes mouth-breathe {
50% {
translate: -50% 5%;
}
}
@keyframes blink {
0%, 46%, 48%, 50%, 100% {
scale: 1 1;
}
47%, 49% {
scale: 1 0.01;
}
}Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/jh3y/pen/abQEpMW
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
