I was excited to remember transforms from my high-school mathematics.
Transforms in programming make it possible for you to make an element to grow, shrink and basically move in any direction you program it to.
The CSS syntax for applying transforms to an element
transform: none
transform-function
initial /* sets element to it's initial value */
inherit /* specifies that a property should inherit its value from its parent element */
Transforms can be applied using CSS and/or JavaScript and in this post I will try to illustrate as many ways possible.
The Rotate Method
The rotate method defines a 2D (the angle is specified in the parameter) and 3D(along the x,y,z angles). Rotate clockwise is represented by positive angles and rotation in the anticlockwise direction is represented by negative angles.
The Translate Method
The translate method allows you to move an HTML element by changing it's X and/or Y position on the page.
The Skew Method
Skewing slants or places an element on a page in such a way that is not parallel to the horizontal or vertical axis of the screen - omg, I don't know if that explanation makes sense.
The Scale Method
The scale method resizes elements by specific ratios. The scale method takes one parameter, a decimal value that represents the % to scale.
Values greater than 1 make the image image bigger and values less than 1 but greater than 0, - 0 > let x=value < 1, make the image smaller.
- Note:The transform property can apply a 2D or 3D transformation to an element in both CSS and Javascript.
Thank you for reading, comments and links to more resources are welcome.
Top comments (0)