Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow | CSS Transform</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <input type="checkbox" role="switch" title="Roll out!" id="transform" /> <label for="transform"> <span>Transform</span> <span></span> <span></span> <span></span> <span></span> </label> <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> <!-- partial --> </body> </html>
CSS
#transform { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } [for=transform] { color: transparent; position: fixed; inset: 0; color: transparent; font-weight: bold; height: 100vh; width: 100vw; cursor: pointer; transform: translate3d(0, 0, 500vmin); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 2; } body > [for=transform] span { display: block; } :root:has([for=transform] span:nth-of-type(1):hover) { --truck-turn: -10deg; --head-turn: -20deg; } :root:has([for=transform] span:nth-of-type(2):hover) { --truck-turn: -5deg; --head-turn: -10deg; } :root:has([for=transform] span:nth-of-type(3):hover) { --truck-turn: 0deg; --head-turn: 0deg; } :root:has([for=transform] span:nth-of-type(4):hover) { --truck-turn: 5deg; --head-turn: 10deg; } :root:has([for=transform] span:nth-of-type(5):hover) { --truck-turn: 10deg; --head-turn: 20deg; } .optimus__head-reactor { height: 100%; width: 100%; } :root:has(#transform:checked) .optimus__head-reactor { transform: rotateY(var(--head-turn, 0deg)); transition: transform 0.125s; } :root:not(:has(#transform:checked)) .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); } body { display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: #11131e; } [for=speed] { cursor: pointer; position: fixed; bottom: 2rem; right: 2.24rem; z-index: 10; font-family: sans-serif, system-ui; transform: translate3d(0, 0, 500vmin); } #speed { position: fixed; bottom: 2.2rem; right: 1rem; z-index: 10; transform: translate3d(0, 0, 500vmin); } :root:has(#speed:checked) { --transition-speed: 2s; } #speed:checked ~ .scene-jumper { --transition-speed: 2s; } .scene { position: relative; } .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; } @-webkit-keyframes breathe { 50% { transform: translateY(-2%); } } @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) { -webkit-mask: linear-gradient(90deg, white 10%, transparent 10% 58%, white 58%); 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) { -webkit-clip-path: polygon(0 0, 0% 100%, 12% 100%, 16% 55%, 54% 55%, 58% 100%, 100% 100%, 100% 0); 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; -webkit-clip-path: polygon(100% 0, 100% 100%, 88% 100%, 84% 55%, 46% 55%, 42% 100%, 0% 100%, 0 0); 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); font-size: calc(var(--size) * 0.25vmin); 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) { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%); } .belt__segment:nth-of-type(5) { -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); 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; } :root:has(#transform:checked) { --transform: 0; } #transform:checked ~ .scene-jumper { --transform: 0; } /* 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) { -webkit-clip-path: inset(calc((1 - var(--transform, 0)) * 100%) 0 0 0); clip-path: inset(calc((1 - var(--transform, 0)) * 100%) 0 0 0); } .forearm-shell .cuboid__side:nth-of-type(1) { --b: 0.9; -webkit-clip-path: inset(0 calc((1 - var(--transform)) * 25%) 0 0); 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 { -webkit-clip-path: inset(0 0 calc((1 - var(--transform, 0)) * 100%) 0); 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 #transform:checked here */ :root:has(#transform:checked) :is(.scene-roller) { transition: transform var(--transition-speed) calc(var(--transition-speed) * 0); } #transform:checked ~ .scene-jumper :is(.scene-roller) { transition: transform var(--transition-speed) calc(var(--transition-speed) * 0); } #transform:checked ~ .scene-jumper .fist > .cuboid > .cuboid__side:nth-of-type(2):after { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); } :root:has(#transform:checked) .fist > .cuboid > .cuboid__side:nth-of-type(2):after { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); } :root:has(#transform:checked) :is(.arm-bar, .forearm) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); } #transform:checked ~ .scene-jumper :is(.arm-bar, .forearm) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); } #transform:checked ~ .scene-jumper .chest .cuboid__side:nth-of-type(2):after, #transform:checked ~ .scene-jumper .chest .cuboid__side:nth-of-type(4):after { transition: width var(--transition-speed) calc(var(--transition-speed) * 1.5); } :root:has(#transform:checked) .chest .cuboid__side:nth-of-type(2):after, :root:has(#transform:checked) .chest .cuboid__side:nth-of-type(4):after { transition: width var(--transition-speed) calc(var(--transition-speed) * 1.5); } :root:has(#transform:checked) :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), rotate var(--transition-speed) calc(var(--transition-speed) * 1.5), translate var(--transition-speed) calc(var(--transition-speed) * 1.5), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); } #transform:checked ~ .scene-jumper :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), rotate var(--transition-speed) calc(var(--transition-speed) * 1.5), translate var(--transition-speed) calc(var(--transition-speed) * 1.5), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); } :root:has(#transform:checked) :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); } #transform:checked ~ .scene-jumper :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); } :root:has(#transform:checked) :is(.forearm-cradle, .core--lower, .scene--optimus) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5); } #transform:checked ~ .scene-jumper :is(.forearm-cradle, .core--lower, .scene--optimus) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5); } /* Extras... */ :root:has(#transform:checked) :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), rotate var(--transition-speed) calc(var(--transition-speed) * 3.5), translate var(--transition-speed) calc(var(--transition-speed) * 3.5), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5); } #transform:checked ~ .scene-jumper :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), rotate var(--transition-speed) calc(var(--transition-speed) * 3.5), translate var(--transition-speed) calc(var(--transition-speed) * 3.5), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5); } /* Back to being a transformer */ :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), rotate var(--transition-speed) calc(var(--transition-speed) * 0), translate var(--transition-speed) calc(var(--transition-speed) * 0), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 0); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 0); } :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1); } .chest .cuboid__side:nth-of-type(2):after, .chest .cuboid__side:nth-of-type(4):after { transition: width var(--transition-speed) calc(var(--transition-speed) * 1.5); } :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), rotate var(--transition-speed) calc(var(--transition-speed) * 1.5), translate var(--transition-speed) calc(var(--transition-speed) * 1.5), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5); } :is(.arm-bar, .forearm) { transition: transform 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 2); } .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), rotate var(--transition-speed) calc(var(--transition-speed) * 4), translate var(--transition-speed) calc(var(--transition-speed) * 4), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 4); 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); 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), -webkit-clip-path var(--transition-speed) calc(var(--transition-speed) * 4); } .scene-roller { transition: transform var(--transition-speed) calc(var(--transition-speed) * 4.5); } /*:root:has(#transform: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); } :root:has(#transform:checked) .scene-jumper { -webkit-animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5); animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5); } #transform:checked ~ .scene-jumper { -webkit-animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5); animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5); } :root:has(#transform:checked) .arm--right .hand { -webkit-animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear; animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear; } #transform:checked ~ .scene-jumper .arm--right .hand { -webkit-animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear; animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear; } @-webkit-keyframes ehhh { 50% { transform: rotateZ(-35deg); } } @keyframes ehhh { 50% { transform: rotateZ(-35deg); } } @-webkit-keyframes jump { 50% { transform: translateY(calc(var(--core-height) * -10vmin)); } } @keyframes jump { 50% { transform: translateY(calc(var(--core-height) * -10vmin)); } } .optimus__mouth { -webkit-animation: mouth-breathe 3s infinite linear; animation: mouth-breathe 3s infinite linear; } .optimus__face .cuboid__side:nth-of-type(5):after { -webkit-animation: blink 6s -2s infinite; animation: blink 6s -2s infinite; } @-webkit-keyframes mouth-breathe { 50% { translate: -50% 5%; } } @keyframes mouth-breathe { 50% { translate: -50% 5%; } } @-webkit-keyframes blink { 0%, 46%, 48%, 50%, 100% { scale: 1 1; } 47%, 49% { scale: 1 0.01; } } @keyframes blink { 0%, 46%, 48%, 50%, 100% { scale: 1 1; } 47%, 49% { scale: 1 0.01; } }
0 Comments