With CSS3 transform can give vibration for the elements (object), an element can move, scale, turn, spin, and stretch elements. This is an effect that lets an element change position, size, and shape. We can transform your elements using 2D or 3D transformation.
Please follow the below transforms method demos and code:-
With the translate () method, the element moves from its current position, depending on the parameters are given for the left (X-axis) and the top (Y-axis) position: Translate Method moves the element from the current position, depending on the parameters values which we have with left(X-axis-Left to Right) and the top(Y-axis) directions. So explanation it changes element position. In example code we have 2 parameters:- 100 X-axis:- it means element moves from Left to Right 150 Y-axis:- it means the element move from Top to Bottom based on parent element.
With the rotate () method, the element rotates clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.
Css3 rotate method is used rotate elements based on values. We have two types of values:-
1) Normal:- This default value, it used to rotate element based on degree clockwise
2) Negative:- used to rotate element based on negative values(values are allowed and rotate element counter-clockwise)
With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):
This will work like width and height properties, Transform Scale property is used to increase and decrease depending on the values given for the width and height(4 is width of element and 2 is height of element based on parent element).
Css3 Transform Skew method use to skew (turns) the element based given values (directions) for the horizontal (X-axis) and the vertical (Y-axis).
This is almost combination of all transform methods, Transform Matrix Method will allow you to do : rotate, scale, move (translate), and skew elements.
|36.0-12.0 -webkit-||4.0 -webkit-||16.0-10.0 -moz-||15.0 -webkit-||10+|