CSS3 allow us to rotate, resize, locate and skew the element in
both 2D and 3D space.In this tutorials 2D transform is discussed
with example,,explanation and source codes. 2D transform is supported
by all current trending browsers. However this is not supported by
some old browser's like IE8, FireFox 3, Opera 10.1 and all their
earlier versions.
2D transform is very easy to apply on element but it should be
sure that the browser is supporting it which you are using.
In this these day 2D transform is trending and became more
popular to attract the users.
Method for 2D transform
1) translate(x,y)
2) translateX(n)
3) translateY(n)
4) matrix(n,n,n,n,n,n)
5) scale(x,y)
6) scaleX(n)
7) scaleY(n)
8) rotate(angle)
9) skewX(angle)
10) skewY(angle)
These all properties are explained below with source code.
Example of translate(x,y)
In this example image will move 50px to x-axis and 50px to y-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translate(50px, 25px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of translateX(n)
In this example image will move 50px to x-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translateX(50px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of translateY(n)
In this example image will move 50px to y-axis.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;transform:translateY(50px);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of matrix(n,n,n,n,n,n)
In this example image will move according to matrix form.
<styletype="text/css">div{height:150px;width:150px;border:3px solid lightgreen;background:lightgrey;}img{height:150px;width:150px;border:1px solid grey;/* Standard syntax */transform:matrix(1, -0.3, 0, 1, 0, 0);/* IE 9 */-ms-transform:matrix(1, -0.3, 0, 1, 0, 0);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scale(x,y)
In this example image scale will increase 2 to x-axis and 2 to y-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scale(2,2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scaleX(n)
In this example image scale will increase 2 to x-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scaleX(2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
Example of scaleY(n)
In this example image scale will increase 2 to y-axis.
<styletype="text/css">div{height:100px;width:100px;border:3px solid lightgreen;background:lightgrey;}img{height:100px;width:100px;border:1px solid grey;transform:scaleY(2);}</style>
<div><imgsrc="img/blog-img/lb-4.jpg"/></div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
