Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Transform

DZone's Guide to

CSS Transform

Interested in learning more about front-end development and web design? Read on for a great tutorial on the CSS transform property.

· Web Dev Zone ·
Free Resource

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Without CSS transitions, the transform property is only able to turn over the object it is applied to. So, in most real-life situations (real-life?), these two options are applied together.

Just Transform

The powers which this property posses are:

  • rotate(angle),
  • skew(angle),
  • translate(x,y),
  • scale(x,y),
  • matrix(n,n,n,n,n,n).

All values are pretty self-explanatory except maybematrix.

The rotate and skew options use angle degree values (values can be negative and you can type more than 360. For example, type in 1080deg for three full rotations).

The scale option uses just numbers and they define how much the object is going to increase/decrease according to parameters given to the width and height.

All of these properties accept the matrix (which is still maybe not self-explained) and have special options with X and Y added to the syntax, in which case, just one parameter is needed and the property, in the rotate and skew cases, becomes relative to x or y-axis (e.g. translateX(), scaleY(), etc...).

The matrix option does EVERYTHING (did you expect less?). The exact syntax is matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()). Even though there is no rotate option inside, it can rotate too. I can't say more than this (because it's math...something...function...something). Check this post for more.

It's also possible to combine multiple transforms by defining them under one transform.

 div {
     transform: rotate(90deg) scale(2) translateY(-50%) translateX(50%);
 }

The most popular effect that this property has been used for, recently, is rotating navigation, social, and other information on left side mostly, and making them vertical. For both examples down below, we used the transform: rotate(-90deg) property.

3D Transform

2D property values rotate, translate, scale and matrix have their parallel 3D values with the z-axis added. The extra 3D property is perspective, which defines a perspective view for a 3D transformed element. Perspective uses one value which defines how far the element is placed from the view.

I believe that all those are really self-explanatory after we understood 2D options.

Transition + Transform

The transform property is used for defining the transition between two states of an element. With the transition, they make a powerful couple, as mentioned at the beginning.

.box {
     ...
     background-color: #0000FF;
     -webkit-transition:background-color 2s, -webkit-transform 2s;
     transition:background-color 2s, transform 2s;
}
.box:hover {
     background-color: #FFCCCC;
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
}

This kind of combination is the most common usage of both the transformand transition property. It's important to remember to define transition in the first state with transform as the value and to define transform in the second state.

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Topics:
web dev ,front-end development ,css

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}