Transform CSS property

Learn how to animate individual CSS transform properties

Overview

The syntax is straightforward because TorusKit uses standard CSS property names. You can use a property like translateX (or the shorthand tx) exactly as you would in your CSS files.

Each transform property can be customized individually without needing to nest elements or use workarounds. This means you can animate scale for 1 second while animating translateY for a different duration on the same element.

Examples

The examples below demonstrate how to use various transform properties with TorusKit. While these examples use the hover or animate trigger, you can apply any other trigger that is available.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

Initial

Multiple clustered values

Clusters provide a great way to simplify the definition of multiple properties that use the same trigger. In this example, instead of defining the hover trigger separately for both the scale and rotate properties, we group them into a cluster with a single, shared hover trigger. The options defined in the cluster are now shared by all the properties within it.

Hover

Discrete timeline

A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the scale property is animated to a final value of 1.5, with the initial value of 1 being used by default.

Animate

Sequenced timeline

A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the scale, translate, and rotate properties sequentially, with each step starting after the previous one completes.

Animate

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the scale, translate, and rotate properties with offsets. The first step is used to define the initial values of each properties used in the animation.

Animate

Combination

You can combine different timeline types, even using the same triggers. In this example, we use two animate triggers with different property animations running simultaneously. The animation for the hover trigger is then smoothly applied when you hover over the element.

Animate

Properties

The list of available properties for the CSS transform.

translate

Name Default Shorthand Example Shorthand Example
translate 0px t translate(1rem) t(1rem)
Hover

translateX

Name Default Shorthand Example Shorthand Example
translateX 0px tx translateX(1rem) tx(1rem)
Hover

translateY

Name Default Shorthand Example Shorthand Example
translateY 0px ty translateY(1rem) ty(1rem)
Hover

translateZ

Name Default Shorthand Example Shorthand Example
translateZ 0px tz translateZ(2rem) tz(2rem)
Hover

translate3d

Name Default Shorthand Example Shorthand Example
translate3d 0px, 0px, 0px t3d translate3d(1rem, 1rem, 8rem) t3d(1rem, 1rem, 8rem)
Hover

scale

Name Default Shorthand Example Shorthand Example
scale 1 s scale(1.5) s(1.5)
Hover

scaleX

Name Default Shorthand Example Shorthand Example
scaleX 1 sx scaleX(1.5) sx(1.5)
Hover

scaleY

Name Default Shorthand Example Shorthand Example
scaleY 1 sy scaleY(1.5) sy(1.5)
Hover

scaleZ

Name Default Shorthand Example Shorthand Example
scaleZ 1 sz scaleZ(5) sz(5)
Hover

scale3d

Name Default Shorthand Example Shorthand Example
scale3d 1, 1, 1 s3d scale3d(1.5, 1.5, 1.5) s3d(1.5, 1.5, 1.5)
Hover

rotate

Name Default Shorthand Example Shorthand Example
rotate 0deg r rotate(45deg) r(45deg)
Hover

rotateX

Name Default Shorthand Example Shorthand Example
rotateX 0deg rx rotateX(45deg) rx(45deg)
Hover

rotateY

Name Default Shorthand Example Shorthand Example
rotateY 0deg ry rotateY(45deg) ry(45deg)
Hover

rotateZ

Name Default Shorthand Example Shorthand Example
rotateZ 0deg rz rotateZ(45deg) rz(45deg)
Hover

rotate3d

Name Default Shorthand Example Shorthand Example
rotate3d 1, 1, 1, 0deg r3d rotate3d(1, 1, 1, 45deg) r3d(1, 1, 1, 45deg)
Hover

Utilities

Order

When applying CSS transform properties, the order in which properties are executed is important and can affect the final result. This may be unexpected, as applying the same transformations in different sequences can lead to different visual effects. To prevent this confusion, you can use the order option to explicitly define the processing sequence for each transformation, with the default starting value of 1.

Name Default Shorthand Example Shorthand Example
order 0 - <order: 1> -
<!-- Unordered -->
Animate


<!-- Ordered -->
Animate