A Quick Guide To CSS3 - 2D and 3D Transformation

CSS3 2D and 3D Transformation

This is one of the most awaiting implementation in terms of creating interactive and real world web pages. CSS has introduced some properties through which we can changes the shape, size and position of the CSS3 elements.

Property	Value options
perspective	none | number
backface-visibility	visible | hidden
transform	none | matrix | matrix3d | translate3d | translateX | scale3d | scaleY | rotate | rotateZ | skew | perspective and so on
perspective-origin	x-axis y-axis|initial|inherit; x-axis - % | left | center | right y-axis - % | left | center | right
transform-style	flat | preserve-3d
transform-origin	x-axis y-axis z-axis|initial|inherit; x-axis - left | center | right | length | % y-axis - left | center | right | length | % z-axis - left | center | right | length | %

Example : 2D Transformation

div {
 transform: translate(70px, 110px);
}

Example : 3D Transformation

div {
    transform: rotateX(150deg);
}

Browser Support for 2D Transformation

Browser Support for 3D Transformation

< Prev : Box Model, Selectors and Box Layout

Next : Cheat sheet and Browser support >