The transform property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.
For example:
.element {
width: 30px;
height: 30px;
transform: scale(10);
}
Despite our height and width declarations, the transform scales our element to ten times its original size!
Transforms are especially fun when combined with animations.
Transform functions
We can use the following functions:
-
scale(): scales the size of an element. -
skew(): turns an element to its left or right. -
rotate(): rotates an element clockwise from its current position. -
translate(): repositions an element in a horizontal or vertical direction. -
perspective(): sets the depth used in 3D transforms.
Let’s take a look at each!
Scale
The scale() function is a shorthand for scaleX() and scaleY().
scaleX() resizes an element along its x-axis (horizontally) and scaleY() along its y-axis (vertically).
For example, lets scale the .element width by 2 (doubling its width) and reduce its height by 0.5 (reducing by half):
.element {
transform: scale(2, 0.5);
}
The first parameter is scaleX() and the second scaleY().
Skew
The skew() function tilts an element left or right. It’s also shorthand for skewX() and skewY().
Skew along the x-axis (horizontal):
transform: skewX(15deg);
Skew along the y-axis (vertical):
transform: skewY(15deg);
Skew along both axis simultaneously:
transform: skew(15deg, 15deg);
Rotate
The rotate() function rotates an element clockwise from its original position:
transform: rotate(25deg);
We can use a negative value to rotate it in the opposite direction:
transform: rotate(-25deg);
Translate
The translate() function moves an element in a horizontal or vertical direction (from its original position):
transform: translate(50px, 10px);
Here our element will have moved 50px (to the right) on its horizontal axis, and 10px (down) on its vertical axis.
This is shorthand for:
transform: translateX(50px);
transform: translateY(10px);
To instead move to the left or up, we’d simply use negative values.
We can use any valid length value, like px, em & rem.
Combining multiple transforms
Multiple transforms can be combined, by separating each function with a space:
transform: rotateY(30deg) scaleX(2) translateX(200px);
3D transforms
With 3D transforms, we add a third “z” axis, which adds the depth dimension.
The following additional functions control the Z axis:
translateZ()rotateZ()scaleZ()
For these we have the corresponding shorthands of translate3d(), rotate3d() and scale3d(). For when we want to combine translateX(), translateY() and translateZ().
Perspective
The perspective property specifies how far away a 3D object appears from the viewer:
.element {
perspective: 100px;
}
A lower value will result in a more intense 3D effect than a higher value.
Note that when defining perspective for an element, the child elements get the perspective view, not the element itself.
Perspective-origin
The perspective-origin property defines at which position the user is looking at the 3D object:
.element {
perspective: 100px;
perspective-origin: left;
}
It positions the 3D object as if it’s being viewed from a different angle.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)