The transformation effect is used to change the position of the content of a web page or rotate the content. Now create a Web page named transformationeffects.html to learn how to apply the transformation effect.
<!doctype html>
<head>
<title>
Rotating Images</title>
<style type="text/css">
img {
width:300px;
height:200px;
}
#transform{
position:relative;
margin:10px auto;
width:300px;
height:200px;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1.0s linear;
}
#transform:hover{
-webkit-transform:rotateZ(35deg);
-webkit-box-shadow:-5px 5px 5px #aaa;
}
</style>
</head>
<body>
<h1>Working With Transformation</h1>
<DIV id="transform">
<img src="nature6.jpg"></DIV>
<DIV id="transform">
<img src="nature5.jpg"></DIV>
<!doctype html>
<head>
<title>
Rotating Images</title>
<style type="text/css">
img {
width:300px;
height:200px;
}
#transform{
position:relative;
margin:10px auto;
width:300px;
height:200px;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1.0s linear;
}
#transform:hover{
-webkit-transform:rotateZ(35deg);
-webkit-box-shadow:-5px 5px 5px #aaa;
}
</style>
</head>
<body>
<h1>Working With Transformation</h1>
<DIV id="transform">
<img src="nature6.jpg"></DIV>
<DIV id="transform">
<img src="nature5.jpg"></DIV>
<DIV id="transform">
<img src="nature1.jpg">
</DIV>
</body>
</html>
The DIV and IMG elements are used to display images on the Web page. We can also see that we have applied the transformation effect on the mouse hover of the DIV element.
The Output of the Above Web page is:
When we move your mouse pointer over an image the image rotates to the 35 degree.
<img src="nature1.jpg">
</DIV>
</body>
</html>
The DIV and IMG elements are used to display images on the Web page. We can also see that we have applied the transformation effect on the mouse hover of the DIV element.
The Output of the Above Web page is:
No comments:
Post a Comment