Transform
Transform property is used for 2D or 3D transformation of a HTML element. An element can be moved, rotated, scaled and skewed through this property. Thus, transform property has method: rotate, scale, translate and skew. Let us go through each of these methods in details along with the examples:
1. Translate: Translate method is used to change the position of an element with respect to the X, Y and Z axis.
Example: Suppose, we want a square to move 20px from the left (X-axis) and 30px from the top (Y-axis) on mouse over, we need to add property transform(10px, 30px) inside mouse hover selector of the square division. Here is the jsfiddle url for this example: 2D translate on mouse hover
2. Rotate: Rotate method is used to rotate an element in 2D and 3D plane. It is written as shown below:
Example: Here is the jsfiddle link of the example, where the square is being rotated on mouse hover.
3. Scale: Scale method is used to change the size of element i.e scale the element in 2D and 3D plane.
Example: This example also consists of the same square, with 2D and 3D scaling on mouse over.
4. Skew: Skew method is used for slanting an element in the 2D plane.
Example: On mouse hover, the square is skewed to 15deg on the X-axis and 20deg on the Y-axis. Here is the example.
Transition
In the above examples, you may notice that on mouse hover, the transformation effect is not smooth as we can see in the first image. Transition css property is used to have smooth transitions with some transition delay as shown in the first image.
Syntax:
It is not necessary to specify every property. The default value or 0 will be considered for any of the unspecified property.
Example: Let us take the first example in which we are translating the square on mouse hover. If we want this transformation to happen with a delay in 2s we would add the css property: transition: transform 2s to the square's css. See this example, how it changes the transition.
Can you try to make something like below?
Color code of the background is #8df8de & for the boxes' background color is rgba(182, 242, 235, 0.5). The dummy text can be taken from: www.lipsum.com. If you need help you can refer this jsfiddle.
For any queries, write an email to info@beawesomewithprogramming.co.in