CSS3 2d Transforms


In CSS3, you can use 2D transforms to modify the appearance of an element by scaling, rotating, skewing, or translating it. The transform property is used to apply 2D transforms to an element.

Here are some common 2D transforms that you can use in CSS:

  • scale: scales an element up or down.
  • rotate: rotates an element around its center.
  • skew: skews an element horizontally or vertically.
  • translate: moves an element horizontally or vertically.

Here’s an example of how you might use the transform property to scale an element:

.my-element {
    transform: scale(1.5);

This would scale the element with the class my-element up by 50%, making it 1.5 times its original size.

You can also use multiple transforms by separating each transform function with a space. For example:

.my-element {
    transform: scale(1.5) rotate(45deg);

This would scale the element up by 50% and rotate it 45 degrees.

It’s important to note that 2D transforms are supported in most modern browsers, but they may not be supported in older browsers. If you need to support older browsers, you can use the -moz-transform, -webkit-transform, and -ms-transform vendor-specific prefixes to ensure that the transforms are applied correctly in all browsers.