Vitamin Transforms

Improve your design with Vitamin's transform CSS properties. With just a few classes, you can rotate, scale, translate and more your elements with ease. Say goodbye to complicated code, and hello to a simpler, more efficient way of adding impact to your design.

Exactly like you wanted it

Transform your design to the next level with Vitamin's CSS transform classes. Easily adjust position, rotation, skew, and more with a few simple classes. Say goodbye to complicated code and hello to effortless, precise design customization.

Classes

the transform classes are named by its default css name, so you can use:

• .rotate
• .scale
• .translate
• .perspective

.rotate

Quickly change the .rotate property of your elment.

Where the sides to pick are:

• r - for right side
• l - for left side

Where the grades are one of:

• 1 - for 1º
• 2 - for 2º
• 3 - for 3º
• 4 - for 4º
• 5 - for 5º
• 90 - for 90º
• 180 - for 180º
• 270 - for 270º

you can rotate 360º (i dont know why but you can) with .rotate-360

Examples

Here are some representative examples of these classes:

    
.rotate-l-2 {
transform: rotate(-2deg);
}

.rotate-r-2 {
transform: rotate(2deg);
}
      
.rotate-r-90 {
transform: rotate(90deg);
}

.rotate-l-90 {
transform: rotate(-90deg);
}

.rotate-360 {
transform: rotate(360deg);
}

Visual examples

Original

.rotate-r-90

.rotate-l-90

.rotate-r-5

.rotate-l-5

.rotate-360 (yes...)

.scale

Quickly change the .scale property of your elment.

Where the sides to pick are:

• .scale - for scaling up
• .scale-n - for scaling down

Working from original size, the variants are one of:

• 1 - scaling up: 1.1, scaling down: .9
• 2 - scaling up: 1.3, scaling down: .8
• 3 - scaling up: 1.5, scaling down: .7
• 4 - scaling up: 2.0, scaling down: .5
• 5 - scaling up: 2.5, scaling down: .2

Examples

Here are some representative examples of these classes:

    
.scale-1 {
    transform: scale(1.1);
}

.scale-3 {
    transform: scale(1.5);
}
      
.scale-n2 {
    transform: scale(0.8);
}

.scale-n5 {
    transform: scale(0.2);
}

Visual examples

Original

.scale-1

.scale-n2

.translate

Quickly change the .translate property of your elments.

Where the sides to pick are:

• r - for right
• l - for left
• t - for top
• b - for bottom

Where the translate values are:

• 1 - for 10%
• 2 - for 20%
• 3 - for 30%
• 4 - for 40%
• 5 - for 50%

Visual examples

Original

.translate-t-1

.translate-b-1

.perspective

add the perspective property to your elments.
you need to use the .perspective class on the parent div for triggering the effect

Where the sides to pick are:

• r - for right
• l - for left
• t - for top
• b - for bottom
• xy - for top-right
• xy-n - for bottom-left

Where the translate values are:

• 1 - for 3deg
• 2 - for 4deg
• 3 - for 5deg
• 4 - for 7deg
• 5 - for 10deg

Visual examples

Original

.perspective-xy-5

.perspective-xy-n5

.perspective-b-5

.perspective-t-5