CSS3 Transforms – Object Transformations

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

These can be the transformation of a shape, position or element size.

There are four available functions: skew, rotate, translate and scale:

/* Skew */
.skew {
  transform: skew(-15deg);
}

/* Rotate */
.rotate {
  transform: rotate(-15deg);
}

/* Translate */
.translate {
  transform: translate(0, 50%);
}

/* Scale */
.scale {
  transform: scale(1.5);
}

Try it at cdpn.io/e/wxoil.

All four functions transform an element around a designated axis. For example, skewX(), skewY().

Combination of Transformations

Remember that combinations of transformations are not separated by a comma:

transform:
  scale(1.5) skew(-15deg);

Transformation Origin

This sets the point of origin of a transformation. By default, the origin is in the center of an element: transform-origin: center center. If we set the origin in the top left corner, it will cause the element to scale from that point:

.scale-2 {
  transform: scale(1.5);
  transform-origin: top left;
}

See more at cdpn.io/e/brBgk

Browser Support

IE10+. For older browsers, you will probably need to use feature detection using Modernizr and then come up with an alternative solution. Basic 2D transformations can be carried out in older Internet Explorers using a proprietary filter function. Also, there is a smart converter for CSS3 to filter conversion.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more