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