Tutorial by Examples

HTML <div class="rotate"></div> CSS .rotate { width: 100px; height: 100px; background: teal; transform: rotate(45deg); } This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and ...

HTML <div class="scale"></div> CSS .scale { width: 100px; height: 100px; background: teal; transform: scale(0.5, 1.3); } This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis. The center of the...

HTML <div class="translate"></div> CSS .translate { width: 100px; height: 100px; background: teal; transform: translate(200px, 50%); } This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis. You can also spe...

HTML <div class="skew"></div> CSS .skew { width: 100px; height: 100px; background: teal; transform: skew(20deg, -30deg); } This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis. The center of the transform is ...

Multiple transforms can be applied to an element in one property like this: transform: rotate(15deg) translateX(200px); This will rotate the element 15 degrees clockwise and then translate it 200px to the right. In chained transforms, the coordinate system moves with the element. This means tha...

Transformations are done with respect to a point which is defined by the transform-origin property. The property takes 2 values : transform-origin: X Y; In the following example the first div (.tl) is rotate around the top left corner with transform-origin: 0 0; and the second (.tr)is transformed ...