CSS Effects Generator

3D Transformations with CSS

Learn how to easily apply 3D CSS transformations! Use our generator to create effects like rotations, scaling, and translations with live preview. Perfect for designers and developers.

0° 0°

Use the controls above to apply rotations on the X and Y axes to the square. Values range from -180° to 180°, providing a full 3D view of the transformation. Learn more on CSS transformations.

transform: rotateX(0deg) rotateY(0deg);

CSS Transform Properties Examples

rotateX(angle) - Rotates the element around the X-axis. The angle can be positive or negative. 

transform: rotateX(45deg);

rotateY(angle) - Rotates the element around the Y-axis. The angle can be positive or negative. 

transform: rotateY(30deg);

scale(factor) - Changes the size of the element. Values greater than 1 increase size, while values less than 1 decrease it. 

transform: scale(1.5);

translateX(distance) - Moves the element horizontally. The distance can be in pixels or other units. 

transform: translateX(50px);

translateY(distance) - Moves the element vertically. 

transform: translateY(-20px);

skewX(angle) - Skews the element along the X-axis. The angle can be positive or negative. 

transform: skewX(15deg);

skewY(angle) - Skews the element along the Y-axis. 

transform: skewY(25deg);

matrix(a, b, c, d, e, f) - Applies a combined 2D transformation using a matrix. 

transform: matrix(1, 0, 0, 1, 0, 0);