CSS Transform and Transition Generator

Transform Types

Below are some examples of the available 2D transformations that I'll show you how to create and customize using the generators further down the page.

translate

Moves the element from it's current position to another position.
You can specify how many pixels it should move along the X and Y axis.

Show/Hide Example Code
-moz-transform: translate(100px,100px);
-ms-transform: translate(100px,100px);
-o-transform: translate(100px,100px);
-webkit-transform: translate(100px,100px);
transform: translate(100px,100px);

scale

Makes the element x times larger or smaller.
Supplying a negative value would cause the element to shrink to nothing, and appear to grow again.
The best way I can think of to explain it is to imagine turning a sock inside out and then turning it right side out again.

Show/Hide Example Code
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);

rotate

Rotates the element x degrees clockwise, or anti clockwise if a negative value is supplied.

Show/Hide Example Code
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

skew

Rotates the element along the X and/or Y axis a specified number of degrees.
Negative values are allowed.

Show/Hide Example Code
-moz-transform: skew(10deg,10deg);
-ms-transform: skew(10deg,10deg);
-o-transform: skew(10deg,10deg);
-webkit-transform: skew(10deg,10deg);
transform: skew(10deg,10deg);

Simple Transform Generator

Here is my simple transform generator that allows you so create a single transform by filling in the boxes.
The boxes have been pre-populated so you can quickly see what a transform using the main methods would look like.

Translate X px
Y px
Scale
Rotate deg
Skew X deg
Y deg
Generated CSS:

Complex Chained Transform Generator

This generator will allow you to chain together your transforms to perform a very complex animation, with as many steps as you like.
It's important to note that due to the complexity of the transforms, the use of javascript/JQuery will be required (I generate the javascript for you as well, so you will just need the JQuery library).

Instructions:

  • Fill in all of the values for the transform you want to use (Example values have been pre-populated, if you don't want to use them, delete the values).
  • Click on the "Add Transition / Transform" button to add the transition and/or transform to the queue.
  • When you've added all of the transforms you want, press the "View Complete Transform" button to view a demo of the transform queue and generate the CSS and javascript in the section below the transform demo.

To edit a transform that is already in the queue:

  • Click on the transform you want to edit.
    This will populate the fields with the content of the transform.
  • Change the value of the transform properties you want to modify or remove.
  • Click on the "Save Changes" button to update the transform with the changes you made.

To delete a transform already in the queue:

  • Click on the "Delete?" text next to the transform you want to remove.
  • If you're sure you want to delete the transform, click "OK" to remove the transform from the queue.
Transition Property:
Duration:
Function:
Delay:
Translate X px
Y px
Scale
Rotate deg
Skew X deg
Y deg

Transform Queue (Executed in this order):

    Javascript:

    1. JQuery Downloads
    2. Example of how to use the JSON output

    Generated JSON:

    This is the list of transitions and transforms that you've created, in JSON form.
    See the example on GitHub (Link above), replace the value of the "myJsonObject" variable with the JSON generated below.
    The first transform/transition setting is not in the JSON object because it's applied via the generated CSS below.
    Once that first animation completes the other animations will be triggered.

    Generated CSS:

    Use this to set up the initial transition and transform values for the element you want to animate.
    Replace "#complexMainDemoDiv" with the name of the element you want to animate.
    When you hover over the element "#complexMainDemoDiv", the first transform (Below) will execute and begin the queue (If there are additional transforms to apply).

    In case you're wondering why the transform and transition statements are repeated multiple times, but prefixed with "-webkit-", "-moz-" etc, this is to ensure that the feature works consistently across the various browsers.


    If you found this tool useful, please consider giving it a +1


    By: Stephen Warren