CSS Transforms

Home / CSS / CSS Transforms

CSS Transforms

CSS transforms:

CSS transforms are a set of CSS properties that allow you to modify the appearance and layout of elements by applying various transformations, such as scaling, rotating, skewing, and translating (moving) them. These transformations are applied without altering the element's underlying structure, which makes them a powerful tool for creating interactive and visually appealing web designs.

Here are some common CSS transform properties and their usage:

transform: translate(x, y); - This property moves an element along the X and Y axes. You can use it to reposition an element without changing its dimensions.

<style>
    element {
      transform: translate(50px, 20px);
    }
  </style>

transform: rotate(angle); - This property rotates an element by a specified angle in degrees, pivoting around its center by default.

 
<style>
    element {
      transform: rotate(45deg);
    }
  </style>

transform: scale(x, y); - This property scales an element along the X and Y axes. A scale of 1 represents the original size, while values greater than 1 enlarge the element, and values less than 1 shrink it.


 <style>
    element {
      transform: scale(1.5, 2);
    }
  </style>

transform: skew(x-angle, y-angle); - This property skews an element by a specified angle along the X and Y axes. It distorts the element without changing its size.

<style>
    element {
    transform: skew(20deg, 10deg);
    }
  </style>

transform: matrix(a, b, c, d, e, f); - This property allows you to apply a 2D transformation using a matrix of values. It's a more advanced option for custom transformations.

 
<style>
    element {
      transform: matrix(1, 0.5, -0.5, 1, 0, 0);
    }
  </style>

transform-origin: x y; - This property specifies the point around which transformations like rotation and scaling occur. By default, it's set to the center of the element.

<style>
    element {
      transform-origin: top left;
    }
  </style>

transform-style: flat | preserve-3d; - This property defines how child elements are rendered when transformed. The preserve-3d value allows for more complex 3D transformations.


<style>
    parent-element {
      transform-style: preserve-3d;
    }
  </style>

Here's an example of using CSS transforms to create a simple animation that scales and rotates an element when hovered:


<style>
    element:hover {
      transform: scale(1.2) rotate(45deg);
      transition: transform 0.3s ease-in-out;
    }
  </style>