# Using rotateX for 3D element tilt

**URL:** <https://forum.kirupa.com/t/using-rotatex-for-3d-element-tilt/681541>\
**Category:** tech news\
**Created:** [May 16, 2026, 7:00am UTC](https://forum.kirupa.com/t/using-rotatex-for-3d-element-tilt/681541 "2026-05-16T07:00:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [May 16, 2026, 7:00am UTC](https://forum.kirupa.com/t/using-rotatex-for-3d-element-tilt/681541/1 "2026-05-16T07:00:16Z")

</div>

The rotateX() function rotates an element around the x-axis in a three-dimensional space rotateX() originally handwritten and published with love on CSS-Tricks.

> **[rotateX() | CSS-Tricks](https://css-tricks.com/almanac/functions/r/rotatex/)**
>
> The rotateX() function rotates an element around the x-axis in a three-dimensional space

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [May 17, 2026, 8:00am UTC](https://forum.kirupa.com/t/using-rotatex-for-3d-element-tilt/681541/2 "2026-05-17T08:00:29Z")

</div>

rotateX always looks like “lol why is my div getting squished” until you give it an actual camera. without `perspective`, you don’t get that foreshortening, so the tilt reads kinda fake/2D.

`transform-origin` is the other lever that makes it feel real. center-origin feels like it’s floating and rotating in place; setting it to the top edge makes it read like a hinged card flip.

```auto
.scene { perspective: 800px; }

.card {
  transform-origin: top center;
  transform: rotateX(18deg);
}

```

and yeah, dropping `perspective()` straight into `transform` is nice when you don’t want a wrapper:

```auto
.card {
  transform-origin: top center;
  transform: perspective(800px) rotateX(18deg);
}

```

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [May 17, 2026, 8:00am UTC](https://forum.kirupa.com/t/using-rotatex-for-3d-element-tilt/681541/3 "2026-05-17T08:00:32Z")

</div>

rotateX() on its own usually looks kinda fake until you give it a “camera.” putting `perspective` on a parent makes the tilt read as depth instead of that odd scale/shear vibe you get with no perspective.

if you’re tilting something with nested layers (like a card with a shadow + content), `transform-style: preserve-3d` keeps the children in the same 3D space, and `backface-visibility: hidden` prevents the backwards/mirrored flicker once you get near 90°.

```auto
.scene { perspective: 800px; }

.card {
  transform: rotateX(18deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

```