Transform generator


The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew elements. You can combine these transformations to the CSS 3 transition to get a nice animation.

Effects
Settings

Here you can customize the appearance of the result area.

Saved!
Reseted!


CSS Code to copy



Browser compatibility

To go further

The transform property allows you to perform 2d or 3d transformations on an html element, such as rotations, translations, asymmetries.
Suppose you have an element identified MyDiv, and defined as below:

<div id="MyDiv"> </div>

The transform syntax for the 2d transformation is as follows:

#MyDiv {
    transform: rotate(30deg) translateX(30px) translateY(20px);
}

The rule defined above applies a rotation of 30 degrees to the element, as well as a translation of 30 pixels on the X axis (horizontal) and 20 pixels on the Y axis (vertical). The different types of transformation are rotate, translate, scale, skew. It is possible to accumulate as many transformations as desired, it suffices for this to add them one after the other.

It is possible to get the same result as the rule above, with the following syntax:

#MyDiv {
    transform: rotate(30deg) translate(30px, 20px);
}

In this example, the translate function accepts the values of the X and Y axes as a parameter, or a single value if this value is to be applied to both axes. All transformation functions can be written in this way, with the exception of rotate, which can not be rotated on any other axis for the 2d transformation.

Below, an example of a 3d transformation:

#MyDiv {
    transform: rotate(30deg) rotateY(45deg) translateX(30px) translateY(20px) translateZ(10px);
}

In this example, a rotation is added on the Y axis, and a translation on the Z axis.

Below is the equivalent syntax:

#MyDiv {
    transform: rotateZ(30deg) rotateY(45deg) translate3d(30px, 20px, 10px);
}

For a 3d rotation, you can also use the Rotate3d function, which takes the X, Y, and Z offset values of the axis of rotation as well as the rotation angle.

#MyDiv {
    transform: rotate3d(20,10,0, 60deg);
}


Leave a suggestion