Prev Next

CSS 2D Transforms

CSS 2D Transforms allow you to modify elements in two-dimensional space. You can rotate, scale, skew, and translate elements using the transform property.

Key Topics

Translate

The translate() function moves an element from its current position. It accepts values for the x-axis and y-axis.

<style>
        .translate-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: translate(50px, 30px);
            margin: 20px;
        }
</style>
<div class="translate-box"></div>

Explanation: The element is moved 50px to the right and 30px down from its original position.

Rotate

The rotate() function rotates an element around its origin. It accepts an angle in degrees (deg).

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

Explanation: The element is rotated 45 degrees clockwise from its original position.

Scale

The scale() function resizes an element. It accepts scaling factors for the x-axis and y-axis.

<style>
        .scale-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: scale(1.5, 1.5);
            margin: 20px;
        }
</style>
<div class="scale-box"></div>

Explanation: The element is resized to 1.5 times its original width and height.

Skew

The skew() function distorts an element by tilting it along the x-axis and/or y-axis.

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

Explanation: The element is skewed by 20 degrees along the x-axis and 10 degrees along the y-axis.

Combining Transforms

You can combine multiple transform functions to achieve complex effects.

<style>
        .combined-box {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            transform: translate(50px, 30px) rotate(45deg) scale(1.2);
            margin: 20px;
        }
</style>
<div class="combined-box"></div>

Explanation: The element is moved 50px to the right, rotated 45 degrees, and resized to 1.2 times its original size.

Key Takeaways

  • Translate: Moves an element along the x-axis and/or y-axis.
  • Rotate: Rotates an element around its origin by a specified angle.
  • Scale: Resizes an element by scaling factors along the x-axis and y-axis.
  • Skew: Tilts an element along the x-axis and/or y-axis for distortion effects.
  • Combining Transforms: Allows you to apply multiple transformations for complex designs.
Prev Next