CSS 3D Transforms

The transform property in CSS enables 3D transformations. These transformations apply to the element's coordinate space, altering its position, size, or orientation.

rotateX

The rotateX() function rotates an element around the x-axis (horizontal). A positive value rotates the element clockwise, while a negative value rotates it counter-clockwise.

.element { transform: rotateX(45deg); }

This code snippet rotates the element 45 degrees clockwise around the x-axis.

rotate

The rotate() function provides a shorthand for rotating an element around all three axes (x, y, and z). You can specify the rotation angle for each axis, separated by commas. For instance:

.element { transform: rotate(45deg, 30deg, 15deg); }

This example rotates the element 45 degrees around the x-axis, 30 degrees around the y-axis, and 15 degrees around the z-axis.

transform-origin

The transform-origin property controls the pivot point for transformations. By default, the pivot point is the center of the element. You can specify the pivot point using percentage values or keywords like top, bottom, left, and right.

.element { transform-origin: 50% 0%; /* Pivot at the top center */ }

Summary

• CSS 3D transforms enable creating three-dimensional effects using properties like rotateX and rotate.
• The transform-origin property controls the pivot point for rotations, influencing the result.
• 3D transformations add depth and visual interest to web designs, enhancing user engagement.