GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS 3D Cube Effects — One Line, Copy-Paste

· Godrich · 9 items · 19 min read

FeedbackSCSSCSS onlyAutoplayLanding page

A css 3d cube spins its four labeled faces inside a perspective wrapper — one of nine such effects below, each one line, copy-paste ready in SCSS, with a

Cube rotate01 3d-cube-carousel-tilt-cube-rotate 3D carousel02 3d-cube-carousel-tilt-3d-carousel Tilt on hover03 3d-cube-carousel-tilt-tilt-hover Book open effect04 3d-cube-carousel-tilt-book-open Flip gallery05 3d-cube-carousel-tilt-flip-gallery Coverflow06 3d-cube-carousel-tilt-coverflow Rotating stage07 3d-cube-carousel-tilt-rotate-stage Perspective text08 3d-cube-carousel-tilt-perspective-text 3D room scroll09 3d-cube-carousel-tilt-room-scroll

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine below build up the three properties that give CSS a sense of depth in the first place — perspective for how close the camera sits, transform-style: preserve-3d so a rotated child keeps its depth instead of getting flattened by its parent, and backface-visibility for hiding whichever face is turned away. 01 through 03 show each of those three doing the least amount of work possible. 04 through 06 stack several faces or several cards inside one shared 3D parent. 07 through 09 build a whole stage rather than a single spinning object. Each code block below keeps only the rule that matters for that item; the full file for every one sits in the zip. What moves here is a face or a whole stage; drawing a single mark stroke by stroke instead is the subject of 9 SVG icon animations, and filling the space behind an object rather than turning the object itself is what the 9 CSS particle backgrounds do.

01Cube rotate

What a css 3d rotating cube needs around it

A four-sided cube spins on its Y axis inside a perspective container, cycling a different label onto each face as it turns.

Cube rotate
Open in a new tab

01 · Cube rotate — Measured area 9.847% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

perspectivetransform-style: preserve-3dbackface-visibility

Where a rotating tile fits

It suits a hero banner or a product tile that needs to rotate through three or four short messages without any script running the show.

.cube {
  transform-style: preserve-3d;
  animation: spin $duration $easing infinite;
}
.cube__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.cube__face--front { transform: translateZ($half); }
.cube__face--right { transform: rotateY(90deg) translateZ($half); }
.cube__face--back  { transform: rotateY(180deg) translateZ($half); }
.cube__face--left  { transform: rotateY(-90deg) translateZ($half); }
@keyframes spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

023D carousel

Five cards on one ring

Five cards stand around a circle at fixed rotateY offsets, and spinning only the parent ring carries all five through a full turn together. Post 028's marquee pushes its row sideways with translateX; this ring never moves along that axis at all — rotation alone does the work.

3D carousel
Open in a new tab

02 · 3D carousel — Measured area 15.028% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateY 배치transform-style: preserve-3d부모만 회전

A logo showcase that keeps circling

It fits a logo showcase or a rotating product badge that needs to keep circling on its own.

.ring {
  transform-style: preserve-3d;
  animation: orbit $duration $easing infinite;
}
// Five cards spaced 72deg apart around the circle — Sass multiplies the
// angle first so the browser never sees rotateY(0 * 72deg)
@for $i from 1 through 5 {
  .ring__card:nth-child(#{$i}) {
    transform: rotateY(#{($i - 1) * $step}) translateZ($radius);
  }
}
@keyframes orbit {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

03Tilt on hover

One fixed angle, no pointer math

A card tilts to one fixed angle the moment a cursor, a keyboard focus ring, or a tap lands on it. Post 032's parallax tilt reads live pointer coordinates through JavaScript on every frame; this one transitions a single :hover value with zero script involved.

Tilt on hover
Open in a new tab

03 · Tilt on hover — Measured area 5.41% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

perspective:hover 고정 각도JS 0줄

Touch without hover

A touch screen without any hover state still reaches the same tilted angle through an @media (hover: none) fallback on :active.

.frame { perspective: 600px; }
.tilt {
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform $duration $easing;
}
.tilt:hover,
.tilt:focus-visible,
.tilt:active {
  transform: rotateX(10deg) rotateY(-14deg);
}
@media (hover: none) {
  .tilt:active { transform: rotateX(10deg) rotateY(-14deg); }
}

04Book open effect

One edge as a hinge

A cover swings open around its left edge to rotateY(-150deg) and reveals the page sitting underneath before easing shut again. Post 006's css 3d card flip spins an entire card 180deg around its own center; here only one edge acts as a hinge and the cover never turns all the way over.

Book open effect
Open in a new tab

04 · Book open effect — Measured area 32.419% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

transform-origin: leftbackface-visibility경첩 회전

Paper, not a flat tile

It works for an onboarding guide or a catalog whose front matter wants to look like paper rather than a flat tile.

.book__cover {
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: open $duration $easing infinite;
}
.book__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.book__face--front { background: $color; }
.book__face--back  { background: darken($color, 14%); transform: rotateY(180deg); }
@keyframes open {
  0%, 15%  { transform: rotateY(0deg); }
  55%      { transform: rotateY(-150deg); }
  85%, 100% { transform: rotateY(0deg); }
}

05Flip gallery

A 0.15s stagger across four tiles

Four grid tiles flip one after another, each one starting 0.15s after the last, so the reveal ripples across the set instead of firing all at once. Where post 006 flips a single card end to end, this spreads that same rotateY flip over four tiles on a staggered delay.

Flip gallery
Open in a new tab

05 · Flip gallery — Measured area 15.097% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

backface-visibilityanimation-delay 시차grid

Introducing several categories

It suits a media gallery grid or a dashboard set introducing several categories at once.

.tile__inner {
  transform-style: preserve-3d;
}
.tile__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.tile__face--back { transform: rotateY(180deg); }
.tile:nth-child(1) .tile__inner { animation: flip $duration $easing infinite; }
.tile:nth-child(2) .tile__inner { animation: flip $duration $easing infinite; animation-delay: .15s; }
@keyframes flip {
  0%, 15%  { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
  85%, 100% { transform: rotateY(360deg); }
}

06Coverflow

Negative delay instead of logic

Five cards share one keyframes animation, offset from one another only by a negative animation-delay, so the center card sits large and facing forward while the two on each side shrink and turn away. Nothing calculates which card counts as centered — the delay math alone keeps all five cycling through their slots.

Coverflow
Open in a new tab

06 · Coverflow — Measured area 15.591% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateY + translateZ음수 animation-delayJS 0줄

A slider that keeps flowing

It suits an album or a portfolio-cover slider that needs to keep flowing without a script deciding the order.

.flow__card {
  animation: flow $duration $easing infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes flow {
  0%   { transform: translateX(-130px) translateZ(-90px) rotateY(45deg) scale(.6); }
  40%  { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
  80%  { transform: translateX(130px) translateZ(-90px) rotateY(-45deg) scale(.6); }
  100% { transform: translateX(-130px) translateZ(-90px) rotateY(45deg) scale(.6); }
}

07Rotating stage

A turntable, not a spinning box

An object turns once every five seconds on a tilted, ellipse-shaped floor that never moves on its own. That's noticeably slower than the css 3d cube animation in item 01, and the added floor is what makes it read as a turntable rather than a bare spinning box.

Rotating stage
Open in a new tab

07 · Rotating stage — Measured area 7.839% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

perspectivebackface-visibility타원 바닥 rotateX

360 degrees on a detail page

It fits a 360-degree new-product preview on an e-commerce detail page.

.turntable__floor {
  border-radius: 50%;
  transform: translateX(-50%) rotateX(70deg);
}
.turntable__object {
  transform-style: preserve-3d;
  animation: turn $duration $easing infinite;
}
.turntable__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.turntable__face--back { transform: rotateY(180deg); }
@keyframes turn {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

08Perspective text

Eight shadow layers of thickness

Eight layers of text-shadow, each one shade darker than the one before it, give a heading the look of extruded thickness. The whole sign then rotates on rotateX around its bottom edge and eases back, like a sign swinging on a hinge fixed at its base.

Perspective text
Open in a new tab

08 · Perspective text — Measured area 3.422% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

다중 text-shadowperspectiverotateX

Dimension without a 3D library

It fits a landing hero title or an event banner headline that wants a little dimension without loading a 3D library for it.

.sign {
  text-shadow: $extruded-shadow;
  transform-origin: center bottom;
  animation: tilt $duration $easing infinite;
}
@keyframes tilt {
  0%, 20%  { transform: rotateX(0deg); }
  55%      { transform: rotateX(-34deg); }
  100%     { transform: rotateX(0deg); }
}

093D room scroll

Open on one side, seen from inside

A room missing its front wall — three walls plus a floor — turns once every nine seconds under a short, 260px perspective, so the view reads like a camera standing inside looking around rather than an object being examined from outside it. Unlike the closed six-sided cube in item 01, this structure is open and viewed from within.

3D room scroll
Open in a new tab

09 · 3D room scroll — Measured area 18.625% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

짧은 perspectivetransform-style: preserve-3dbackface-visibility

Why nothing listens for scroll

Despite the name, nothing here listens for an actual scroll event — the turn runs on the same kind of CSS loop as the rest of this set.

.room-scene { perspective: 260px; }
.room {
  transform-style: preserve-3d;
  animation: look-around $duration $easing infinite;
}
.room__wall {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.room__wall--back  { transform: translateZ(-$half); }
.room__wall--left  { transform: rotateY(90deg) translateZ(-$half); }
.room__wall--right { transform: rotateY(-90deg) translateZ(-$half); }
@keyframes look-around {
  from { transform: rotateY(-35deg); }
  to   { transform: rotateY(325deg); }
}

Where does this break?

The place these nine most often end up is the first screen of a product page, where spinning something as large as item 07's stage costs trust long before it costs performance. The nine clean SaaS landing sections show the calmer baseline worth measuring that against. The ways the 3D itself falls apart come earlier than that.

When the three properties landed

All nine lean on the same three properties for their sense of depth, and the three didn't land everywhere at the same time. perspective reached Baseline "Widely available" back in 2015, and transform-style: preserve-3d reached that same status on the same timeline according to MDN. backface-visibility — the one this set leans on hardest, since six of the nine items depend on it — only crossed that line in March 2022, years after the other two. caniuse's CSS 3D Transforms table shows all three running in every current major browser now, so the gap only matters for a project still supporting very old releases.

Two traps that only show at runtime

Two of the nine also hide a trap that only shows up once the code actually runs. Item 02 places its five cards with rotateY(#{$i} * #{$step}deg), an SCSS string built by dropping two variables straight into the value. For the first card, Sass hands the browser rotateY(0 * 72deg) — and a transform function reading that outside of calc() can't multiply it, so the whole declaration is thrown out as invalid, and every card lands stacked on the same spot instead of spread around the ring. Multiplying ($i - 1) * $step inside Sass first, before the value ever reaches the compiled CSS, hands the browser a finished angle like 72deg it can actually parse. Item 06's coverflow hides a quieter version of the same lesson: z-index sits inside its shared keyframes next to opacity and scale, but z-index isn't an animatable property, so it snaps at each keyframe boundary instead of interpolating between them — the smooth-looking overlap a viewer sees comes entirely from opacity and scale shifting together, not from z-index easing anywhere at all. Every one of the nine also keeps backface-visibility: hidden next to a transform-style: preserve-3d set on an actual ancestor in the chain, since the hidden face does nothing once any parent along that chain drops out of the 3D context and flattens its children back down to a plane. The nine SCSS files with every one of those fixes already in place unlock from the zip below with bfmwjndp, typed exactly as this line spells it, no capitals added anywhere.

Accessibility

A fixed angle instead of nothing

All nine drop to a fixed end state under prefers-reduced-motion: reduce rather than disappearing outright, so the content stays visible with the motion gone. Items 01, 02, and 04 through 09 turn their animation off and settle at a fixed viewing angle — a cube caught mid-turn, a room facing forward — so nothing snaps back to a blank starting frame. Item 03 is the one exception: reduced motion clears its transition and its transform back to none entirely, since a hover card stuck holding a tilted angle with no way to reach it again would read as broken rather than restrained. That same item is also the one built for a keyboard from the start — its trigger carries tabindex="0" so :focus-visible lands the identical fixed angle a mouse hover gets, with nothing here depending on a pointer being present at all.

@media (prefers-reduced-motion: reduce) {
  .cube              { animation: none; transform: rotateY(-28deg); }
  .ring              { animation: none; transform: rotateY(0deg); }
  .tilt, .tilt.is-demo { animation: none; transition: none; transform: none; }
  .book__cover       { animation: none; transform: rotateY(-150deg); }
  .gallery.is-demo .tile__inner { animation: none; transform: rotateY(180deg); }
  .flow__card        { animation: none; transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); opacity: 1; }
  .turntable__object { animation: none; transform: rotateY(-20deg); }
  .sign              { animation: none; transform: rotateX(-20deg); }
  .room              { animation: none; transform: rotateY(-15deg); }
}

Where the rest lives

The rest of this line of demos lives on the CSS category hub, and what this site does and doesn't sell is covered on the about page.

FAQ

Can I use just one css 3d cube effect without the other eight?

Yes — each item's SCSS sits in its own file under its own class names, so item 01's cube copies over on its own without pulling in the ring, the tilt, or anything else in this set. The three shared properties only need to sit on that cube's own markup, not on a page-wide wrapper shared by all nine. If a front-and-back card is the whole requirement, the nine CSS card flip animations reach it in about twenty lines apiece.

Do any of these nine, including the css 3d tilt effect, need JavaScript to run?

No — all nine, including the hover tilt in item 03, run entirely on a CSS animation or transition once a browser supports the three properties covered above. The only place a script shows up at all is the .is-demo class the live grid uses to auto-loop every effect for a viewer who can't hover a fixed iframe; the standalone files in the zip drop that class and answer to a real cursor, a keyboard, or a tap instead.

Why does rotateY(0 * 72deg) break the 3D carousel instead of just rotating by zero?

Because Sass interpolates #{$i} * #{$step} as a literal string rather than doing the multiplication itself, the browser ends up reading rotateY(0 * 72deg) as a raw value in its transform list, and outside of calc() that list doesn't evaluate arithmetic written that way — so the whole declaration is dropped rather than rounded to zero. Multiplying inside Sass before the value reaches the compiled CSS avoids the issue completely.

Enter the archive password

The password is inside this article. You will find it as you read.