Effect Presets

Container (Perspective)

Perspective: 1000pxDistance from viewer

Origin X: 50%

Origin Y: 50%

3D Transform

Rotation

Rotate X: 0°

Rotate Y: 0°

Rotate Z: 0°

Translation

Translate X: 0px

Translate Y: 0px

Translate Z: 0px

Scale

Scale X: 1

Scale Y: 1

Scale Z: 1

Element Settings

Transform Style

Backface Visibility

Background Color

Width

Height

Animation

Enable Animation

Save/Load Effects

Live Preview

Front

Origin

Generated CSS

/* Container with perspective */
.perspective-container {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

/* 3D transformed element */
.perspective-element {
  width: 200px;
  height: 200px;
  background-color: #3b82f6;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

Hover Effect (Alternative)

/* Hover effect example */
.perspective-element {
  transition: transform 0.3s ease;
}

.perspective-element:hover {
  transform: none;
}

3D Transform Reference

perspective

Distance from the viewer to the z=0 plane. Lower values create more dramatic effects.

perspective: 500px;

perspective-origin

The vanishing point of the 3D scene. Changes viewing angle.

perspective-origin: 50% 50%;

transform-style

preserve-3d allows children to exist in 3D space. flat flattens children.

transform-style: preserve-3d;

backface-visibility

Controls if the back of an element is visible when rotated past 90°.

backface-visibility: hidden;