Hi, You will be happy to know that we can
create a 3D animation in HTML5 and it is very interesting to work with and much
simple is its creation. In this article you will learn how to create an <iframe></iframe>
object and add 3D animation to it. Here we will make use of few javaScript and
some styles along with the HTML code.
Just go through the steps to know how to create
this application.
Step 1 : Open a HTML editor or Visual
studio. This is where we will create the HTML5 application. If you use visual
studio then
- Go to Solution Explorer
- Right Click on the Application name
- Select Add-->add new item
- Now in this window that opens up select an HTML page
- Name this page as 3D animation
Step 2 : Now setting up the frame.
Delete the code that is automatically generated in the HTML page so created.
Write the following code below to begin
<!DOCTYPE html>
<html>
<head><title>3D
animation</title>
<body>
</body>
</html>​
Step 3 : Now creating a
frame in the Browser.
<!DOCTYPE html>
<html>
<head><title>3D
animation</title>
<body>
<div id="transformation">
<iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
</div>
</body>
</html>​
Here we set the frame source
and the dimensions of the frame that is embeded in the host browser. If you
notice you will find that a tag named <div id="transformation">
is also mentioned here, this is actually the reason for applying
transformation or animation effect to the frame. This will be explained later in
this article.
Step 4
:
Now adding a style to the frame see the style code below.
<!DOCTYPE html>
<html>
<head><title>3D
animation</title>
<style type ="text/css">
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
<body>
<div id="transformation">
<iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
</div>
</body>
</html>​
This is here when the tag
<div id="transformation">
applies changes to the frame. In this tag the style is called and applied to the
frame or whatever is quoted inside the <div id="transformation">tag.
Here only <iframe is quoted inside this tag so style is applied to the frame.
Now learning little more
elaborately the style that is applied above. If you look at the lines of code
defined for the style,It contains the line
-webkit-perspective:
800;and perspective:
800; these lines are important to work with 3D
because these lines defines the depth of 3D secene from values 1-1000
Step 5 : Now adding a mouse
hovering effect to the frame. Write the following code.
<!DOCTYPE html>
<html>
<head><title>3D
animation</title>
<style type ="text/css">
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 65deg);
transform:
rotate3d(0, 0, 1, 65deg);
}
<body>
<div id="transformation">
<iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
</div>
</body>
</html>​
Here the method #transformation iframe:hover creates a mouse hover effect on
the frame such that when the mouse is hovered over the frame it starts rotating
to 40degree
Step 6 : The complete animation effect is
created by the following code.
#transformation
{
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 3s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 60deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 65deg);
transform:
rotate3d(0, 0, 1, 65deg);
}
Step 7 : Using these codes two- three times in
the HTML code creates a more flexible rotation effect. This is the complete
code.
<!DOCTYPE html>
<html>
<head><title>3D
animation</title>
<style type ="text/css">
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 3s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 60deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 65deg);
transform:
rotate3d(0, 0, 1, 65deg);
}
#transformation
{
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 2s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 50deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 50deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 50deg);
transform:
rotate3d(0, 0, 1, 55deg);
}
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 3s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 60deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 65deg);
transform:
rotate3d(0, 0, 1, 65deg);
}
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 4s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 750deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 75deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 80deg);
transform:
rotate3d(0, 0, 1, 450deg);
}
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 2s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 50deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 50deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 550deg);
transform:
rotate3d(0, 0, 1, 55deg);
}
#transformation {
-webkit-perspective:
800;
perspective:
800;
margin: 100px 0 100px 50px;
}
#transformation iframe {
-webkit-transition:
-webkit-transform 3s ease-in-out;
-webkit-transform:
rotate3d(0, 1, 1, 60deg);
transition:
transform 1s
ease-in-out;
transform:
rotate3d(0, 1, 1, 60deg);
}
#transformation iframe:hover {
-webkit-transform:
rotate3d(0, 0, 1, 650deg);
transform:
rotate3d(0, 0, 1, 65deg);
}
</style>
</head>
<body>
<div id="transformation">
<iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>
</div>
</body>
</html>
Output : To view the effect just hover the mouse over the image below and it will start rotating.
Note: Be sure if this doesnt work or the image remains still and do not rotate, it means there is some problem in the browser support.Please prefer Safari or Chrome to see the effect clearly because earlier versions of Browsers do not suppot <iframe> tags and other HTML5 tags.
3D animation