To transform an object in two dimensions, apply the following transform style:

transform: effect(params);

where effect is a transformation function and params are parameters used by that function. All transformations are down from the horizontal and vertical center of the object. To change the location of the transformation apply the transform-origin style:

transform-origin: horizontal vertical;

where horizontal vertical is location from where the transformation originates.

Use the web form below to generate the CSS code to apply a transformation to the preview image and to change the location of the transformation.

translateX -100px 100px
translateY -100px 100px
translate -100px 100px
-100px 100px
scaleX -2.0 2.0
scaleY 2.0 2.0
scale -2.0 2.0
-2.0 2.0
skewX -360deg 360deg
skewY -360deg 360deg
skew -360deg 360deg
-360deg 360deg
rotate -360deg 360deg