Transformation Effects

Transformation is a process of changing the position, size, or style of an object. CSS provides the transform property to apply the transformation effect on the HTML elements. The possible values of the transform property are listed as follows:

• transform: Specifies the transform function to apply it on an element. The possible values of this property are matrix, rotate, scale, scaleX, scaleY, skew, skewX, skewY, translate, translateX, and translateY.
• transform-origin: Specifies the origin of the transformation for an element. The possible values of this property are left, right, center, bottom, top, and 50% 50%.
• transform-style: Specifies whether the transformation apply in 2D or 3D on an element. The possible values of this property are flat and perspective-3D.
• perspective: Shows an element from different angles and perspectives.
• perspective-origin: Specifies the origin of the perspective for an element. The possible values of this property are left, right, center, bottom, top, , and 50% 50%.
• backface-visibility: Specifies whether or not the back side of an element is visible. The possible values of this property are visible and hidden.

The following code snippet shows an example of using the transformation properties:

p { -webkit-transform: rotate(45deg); -webkit-perspective: 1200px; -webkit-perspective-origin: right; }

In the preceding code snippet, we have defined the transform property to rotate the paragraph element. The perspective property has been set to 1200px and the perspective-origin property to right, which enable you to view the element at 1200 points from its right side.

Click here for demos to see transformation effects:
demo