The CSS Transform Property
The transform: property is a great tool. It can help to create very cool animations and gives you, the developer the ability to rotate, scale, move, skew, etc., elements. In this blog, we’ll learn about the most general transform: property values out of the twenty-four that currently exist.
- Translate(x,y)
- Rotate(angle)
- Scale(x,y)
- Skew(x-angle,y-angle)
The HTML code snippet below has five <p> tags to display the appropriate explanation for each transformed image. ANY element can be transformed with this property but in this example, we’ll demonstrate the power of transform with the same image. Each <img> tag will receive it’s own unique id that we'll use to select them in our CSS page.
Translate(x,y)
With translate, we can move our img element to a different location on the browser. The translate(x,y) property value takes two px measurements. The x-value will move the element to the right, while the y-value will move the image down. The image can be moved left and up if the x and y values are negative.
Rotate(angle)
With rotate, we can rotate our image without moving its current location. This is perfect to use when you want to angle elements. Therotate(angle) property value takes a degree measurement so brush up on your angles if you want to take full advantage of this. Keep in mind that the element will always angle clockwise.
Scale(x,y)
With scale, we can make images smaller or larger than their original set width: and height:. The scale(x,y) property value will take two-pixel values which are used to set the new width: and height: values for this image.
Skew(x-angle,y-angle)
With skew, the image is distorted by two given angles in the horizontal and vertical directions. The skew(x,y) property value will take two angle measurements. The x-value will skew the image along the x-axis and the y-value will skew the image along the y-axis. The property value is the hardest of the four we’ve seen so far, if you haven’t grasped the transformation then you can check out the MDN we documentation here.
Conclusion
And those are the basics for the transform property. The final outcome of the code is shown in the image below! With just the four property values above you can make very cool transformations. There are twenty more that you can learn about and use so if that’s something you are interested in definitely check out the links below and play with a few examples that w3schools and the MDN web docs provide.
