home

Css3 2D transforms

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.

CSS3 2D Transforms Methods

Please follow the below transforms method demos and code:-
• translate()
• rotate()
• scale()
• skew()
• matrix()

Css3 translate() Method

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.

<div id="Transform_translate"></div>
<style>
#Transform_translate {
    -ms-transform: translate(100px,150px); /* IE 9 */
    -webkit-transform: translate(100px,150px); /* Chrome, Safari, Opera */
    transform: Ttranslate(100px,150px);
    width: 100px;
    height: 100px;
    background-color: yellow;
    border:3px solid red;
    margin:20px;
}
</style>

Css3 rotate() Method

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)

<div id="Transform_Rotate"></div>
<style>
#Transform_Rotate {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    width: 100px;
    height: 100px;
    background-color: yellow;
    border:3px solid red;
    margin:20px;
}
</style>

Css3 scale() Method

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).

<div id="Transform_Scale"></div>
<style>
#Transform_Scale {
    -ms-transform: scale(4,2); /* IE 9 */
    -webkit-transform: scale(4,2); /* Chrome, Safari, Opera */
    transform: scale(4,2); /* Standard syntax */
    width: 100px;
    height: 100px;
    background-color: yellow;
    border:3px solid red;
    margin:20px;
}
</style>

Css3 skew() Method

Css3 Transform Skew method use to skew (turns) the element based given values (directions) for the horizontal (X-axis) and the vertical (Y-axis).

<div id="Transform_Skew"></div>
<style>
#Transform_Skew {
    -ms-transform: skew(20deg,20deg); /* IE 9 */
    -webkit-transform: skew(20deg,20deg); /* Chrome, Safari, Opera */
    transform: skew(20deg,20deg);
    width: 100px;
    height: 100px;
    background-color: yellow;
    border:3px solid red;
    margin:20px;
}
</style>

Css3 matrix() Method

This is almost combination of all transform methods, Transform Matrix Method will allow you to do : rotate, scale, move (translate), and skew elements.

<div id="Transform_Matrix"></div>
<style>
#Transform_Matrix {
    -ms-transform: matrix(0.666,0.5,-0.6,0.666,15,2); /* IE 9 */
    -webkit-transform: matrix(0.666,0.5,-0.6,0.666,15,2); /* Chrome, Safari, Opera */
    transform: matrix(0.666,0.5,-0.6,0.666,15,2);
    width: 100px;
    height: 100px;
    background-color: yellow;
    border:3px solid red;
    margin:20px;
}
</style>

Transform Browser Compatibility for 2D

Chrome Safari Firefox Opera IE
36.0-12.0 -webkit- 4.0 -webkit- 16.0-10.0 -moz- 15.0 -webkit- 10+