Prev Next

CSS 3D Transforms

CSS 3D Transforms enable elements to be transformed in three-dimensional space. They include rotations, translations, scaling, and perspective effects, offering a powerful way to create visually rich designs.

Key Topics

RotateX

The rotateX() function rotates an element around the x-axis, creating a flipping effect.

<style>
        .rotate-x-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: rotateX(45deg);
            margin: 20px;
        }
</style>
<div class="rotate-x-box"></div>

Explanation: The element is rotated 45 degrees around the x-axis, creating a 3D flipping effect.

RotateY

The rotateY() function rotates an element around the y-axis, simulating a horizontal flip.

<style>
        .rotate-y-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: rotateY(45deg);
            margin: 20px;
        }
</style>
<div class="rotate-y-box"></div>

Explanation: The element is rotated 45 degrees around the y-axis, giving it a horizontal flipping effect.

RotateZ

The rotateZ() function rotates an element around the z-axis, similar to 2D rotation.

<style>
        .rotate-z-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: rotateZ(45deg);
            margin: 20px;
        }
</style>
<div class="rotate-z-box"></div>

Explanation: The element is rotated 45 degrees around the z-axis, creating a spinning effect.

Perspective

The perspective property defines the depth of 3D space for child elements, creating a realistic 3D effect.

<style>
        .perspective-container {
            perspective: 400px;
        }
        .perspective-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: rotateY(45deg);
            margin: 20px;
        }
</style>
<div class="perspective-container">
    <div class="perspective-box"></div>
</div>

Explanation: The perspective property gives depth to the 3D space, making the rotation look realistic.

Combining 3D Transforms

Multiple 3D transforms can be combined to create complex animations and effects.

<style>
        .combined-3d-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: rotateX(45deg) rotateY(45deg) scale(1.2);
            margin: 20px;
        }
</style>
<div class="combined-3d-box"></div>

Explanation: The element is rotated 45 degrees along both the x and y axes, and scaled to 1.2 times its original size, creating a dynamic 3D effect.

Key Takeaways

  • RotateX: Rotates an element around the x-axis.
  • RotateY: Rotates an element around the y-axis.
  • RotateZ: Rotates an element around the z-axis, similar to 2D rotation.
  • Perspective: Adds depth to the 3D scene for more realistic effects.
  • Combining Transforms: Use multiple transforms together for creative 3D designs.
Prev Next