CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS 3D Transform Builder

Build CSS 3D transforms visually. Control perspective, rotateX, rotateY, rotateZ, translateZ, and scale with live sliders. The preview card updates in real time so you can see exactly how the transform looks before copying the CSS.

600px
-15deg
20deg
0deg
0px
10× (1.0)

Live preview

3D Transform

transform: rotateX(-15deg) rotateY(20deg)

CSS Output
/* Parent container — sets 3D stage */.container {  perspective: 600px;  perspective-origin: center;} /* Child element — apply the transform */.element {  transform: rotateX(-15deg) rotateY(20deg);  transform-style: preserve-3d;  backface-visibility: hidden;}

How to use

01

Set perspective

Perspective controls the depth effect — lower values (300-600px) create dramatic 3D, higher values (1000px+) are more subtle.

02

Rotate the element

RotateX tilts top/bottom, rotateY flips left/right, rotateZ spins in-plane. Combine all three for complex transforms.

03

Add translateZ

Move the element toward or away from the viewer along the Z axis. Works best with perspective set on the parent.

04

Copy CSS

The output includes perspective on the parent container and transform on the child element — both are required.

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →