CSS3 2D Transforms
In CSS3 we can move, scale, turn, stretch & spin elements.
With that effect element can change shape, size, position.
List of 2D Transforms Methods
- translate()
- rotate()
- scale()
- skew()
- matrix()
translate() Method
With translate() Method we can move elements from one position to other. depending on x-axis and y-axis position.
2D Translate
-ms-transform: translate(100px,150px); /* IE 9 */
-webkit-transform: translate(100px,150px); /* Chrome, Safari, Opera */
transform: translate(100px,150px);
}
translate(100px,150px) moves element x-axis by 100px & y-axis by 150px.
rotate() Method
With rotate() Method we can rotate elements clockwise by given degree. also we can rotate anti-clockwise by applying negative degree.
2D Rotate
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
rotate(45deg) rotate element by 45 degree clockwise.
scale() Method
With scale() Method we can increase or decrease the element size. Depending upon the given parameter x-axis & y-axis.
2D Scale
-ms-transform: scale(5,10); /* IE 9 */
-webkit-transform: scale(5,10); /* Chrome, Safari, Opera */
transform: scale(5,10);
}
scale(5,10) increase the size by x-axis & y-axis.
skew() Method
With skew() Method we can turn element at given angle. depending upon given x-axis & y-axis.
2D Skew
-ms-transform: skew(45deg,65deg); /* IE 9 */
-webkit-transform: skew(45deg,65deg); /* Chrome, Safari, Opera */
transform: skew(45deg,65deg);
}
skew(45deg,65deg) turn element by 45 degree x-axis & 65 degree to y-axis.
matrix() Method
With matrix() Method we can combine all 2D transform in to one.
And it will take 6 parameters which is ( rotate, scale, translate, skew ).
2D Matrix
-ms-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* IE 9 */
-webkit-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.755,0.6,-0.6,0.966,0,0);
}
Full HTML & CSS Code
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: #1FA67A;
border: 1px solid black;
color:#FFFFFF;
}
div.translate {
-ms-transform: translate(50px,75px); /* IE 9 */
-webkit-transform: translate(50px,75px); /* Chrome, Safari, Opera */
transform: translate(50px,75px);
}
div.rotate {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
div.scale {
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
left:200px;
top:30px;
position:relative;
}
div.skew {
-ms-transform: skew(25deg,45deg); /* IE 9 */
-webkit-transform: skew(25deg,45deg); /* Chrome, Safari, Opera */
transform: skew(25deg,45deg);
}
div.matrix {
-ms-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* IE 9 */
-webkit-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.755,0.6,-0.6,0.966,0,0);
}
</style>
</head>
<body>
<div>Hello. I m a normal DIV !!!</div>
<div class="translate">Hello. I m a translate DIV !!!</div>
<div class="rotate">Hello. I m a rotate DIV !!!</div>
<div class="scale">Hello. I m a scale DIV !!!</div>
<div class="skew">Hello. I m a skew DIV !!!</div>
<div class="matrix">Hello. I m a matrix DIV !!!</div>
</body>
</html>
