CSS Transform Property
Tags: css, transform, webdesign, examples
Published: 2018-04-17 09:25:16

---
title: CSS Transform Property
published: true
description: Thorough explanation of this popular property. Examples included!
tags: CSS, transform, web design, examples.
---
Without the [transition](https://kolosek.com/css-transition/), transform property is able just to turn over the object it is applied to. So, in the most real-life situations (real-life?), these two options are applied together.

##Just Transform

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-explainable except maybe the matrix.

`rotate` and `skew` options use angle degree values (values can be negative and you can type more than 360, such as 1080deg, for three full rotations).

The `translate` option uses `px` or `%`.

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) have special options with X and Y added to syntax in which case, just one parameter is needed and property in `rotate` and `skew` cases, becomes relative to x or y-axis (e.g. translateX(), scaleY()...). 

The `matrix` option does EVERYTHING (did you expect less?). The exact syntax is `matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())`. Even thought there is no rotate option inside, it is shown to me that it can rotate too. I can't say more that this (because it's math...something...function...something). Check [this post](https://www.quackit.com/css/functions/css_matrix_function.cfm) 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 is used for recently, is rotating navigation, social and other information on left side mostly, and making them vertical. For both examples down below is used `transform: rotate(-90deg)` property.

![Screen-Shot-on-Mar-1st-at-08_39-AM](https://kolosek.com/content/images/2018/03/Screen-Shot-on-Mar-1st-at-08_39-AM.png)

![Screen-Shot-on-Mar-1st-at-08_53-AM](https://kolosek.com/content/images/2018/03/Screen-Shot-on-Mar-1st-at-08_53-AM.png)

##3D Transform

2D property values `rotate`, `translate`, `scale` and `matrix` have its parallel 3D values with z-axis added. 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.
 

* **rotate3d(x,y,z,angle)**,
* **translate3d(x,y,z)**,
* **scale3d(x,y,z)**,
* **matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)**,
* **perspective(n)**.

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

##Transition + Transform

The [`transform` property](https://kolosek.com/css-transition/) 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, `transform` and `transition` property. It's important to remember to **define transition in the first state with transform as value and to define transform in the second state.**

##Final Word
Shake those straight elements of yours!

This post is originally posted on [Kolosek Blog](https://kolosek.com/css-transform/).