Transform

Translate

This allows you to slide or translate an element on the X or Y axis.

💡

Hover or Click the following elements throughout this page to see how the various animations work.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: translateX(20px);
    }

Scale

This allows you to scale an element on the X and or Y axis.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: scale(1.2, 1.2);
    }

Rotate

This allows you to rotate an element on the Z axis.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: rotate(10deg);
    }

Skew

This allows you to skew an element.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: rotate(10deg);
    }

Origin

This allows you to change the origin point of the transform.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: rotate(25deg);
        transform-origin: right bottom;
    }

Combinations

You can combine multiple transform operations.

.element {
        transition: transform 0.3s ease-in-out;
    }
    
.element:hover {
        transform: transform 25px rotate(90deg);
    }