CSS3 2D Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
We will learn about the 2d transform methods:
Syntax:
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transforms </title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:#660000;
border:1px solid black;
color:#fff;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Result:
With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
We will learn about the 2d transform methods:
- translate()
- rotate()
- scale()
- skew()
- matrix()
Browser Support:
- Internet Explorer 9 requires the prefix -ms-.
- Firefox requires the prefix -moz-.
- Chrome and Safari requires the prefix -webkit-.
- Opera requires the prefix -o-.
Syntax:
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transforms </title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:#660000;
border:1px solid black;
color:#fff;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Result:
No comments:
Post a Comment