Introduction
We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This
article is intended to help with the use of HTML5 tools to develop a simple 3D application. We know that HTML is Hyper Text Markup Language and is used to
display data in a browser.
If we compare 3D graphics with the real world the real world has the advantage
of being infinite in size and detail down to the atoms that make up molecules
that make up materials that make up objects and so on and so forth. Obviously
computing devices can only store and process a limited amount of data. So when
attempting to model the real world shortcuts need to be taken and if you look
closely enough at any digitized picture, you will see flaws that are not visible
in the real world.
CSS is the acronym for Cascading Style Sheet that is
used for design. CSS defines HOW HTML elements are to be displayed. Styles
are normally saved in external .css files. External style sheets enable you to
change the appearance and layout of all the pages in a Web site, just by editing
one single file. CSS stands
for Cascading Style Sheets. It is a way to divide the content from the layout on
web pages.
Step1: Open the HTML
editor.
- Click the start button
-> notepad.
- The name of notepad is
on your choice.
- There name of notepad
is "hunter".
![notepad.gif]()
Step2: Create a folder.
- In any drive create a folder with the name of your choice.
- There we create folder in D drive with the
name "Tom".
![ffghgh.gif]()
Step3: Set the
style on your 3D application.
Code
<style>
#anim1 {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#anim1 iframe {
-webkit-transition: -webkit-transform 1s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 30deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 30deg);
}
#anim1 iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 30deg);
transform: rotate3d(0, 0, 1, 30deg);
}
</style>
![1.gif]()
Step4:
There is nothing better than jumping straight in. In this sample we will apply a
basic set of rotations of an arbitrary DOM element. We start by defining a
perspective on the root element
<div
style="-webkit-perspective:
800; perspective: 800; margin: 100px 0 0 50px">
Perspective is important because it defines how the depth of the CSS3 3D scene
is rendered, values from 1-1000 will produce a very pronounced effect, and
values over 1000 less so.
We then add an iframe and apply a 30 degree rotation around the Z and Y axis :
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform:
rotate3d(0, 1, 1, 30deg)"></iframe>
That is it the
element is fully interactive and in all respects it is a fully fledged DOM
element.
Step5:
Set the animated properties in your
application.
Code
#anim1 iframe {
-webkit-transition: -webkit-transform 1s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 30deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 30deg);
}
#anim1 iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 30deg);
transform: rotate3d(0, 0, 1, 30deg);
}
Step6: Write a
simple iframe with no rotation
applied.
Code
<html>
<body>
<div
style="-webkit-perspective:
800; perspective: 800; margin: 100px 0 100px 50px">
<iframe
src="http://www.c-sharpcorner.com/"
style="-webkit-transform:
rotate3d(0, 1, 1, 30deg); transform: rotate3d(0, 1, 1, 30deg
;"></iframe>
</div>
</body>
</html>
![2.gif]()
Step7: The complete
animated application is:
Code
<html>
<head>
<style>
#anim1 {
-webkit-perspective: 800;
perspective: 800;
margin: 100px 0 100px 50px;
}
#anim1 iframe {
-webkit-transition: -webkit-transform 1s ease-in-out;
-webkit-transform: rotate3d(0, 1, 1, 30deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0, 1, 1, 30deg);
}
#anim1 iframe:hover {
-webkit-transform: rotate3d(0, 0, 1, 30deg);
transform: rotate3d(0, 0, 1, 30deg);
}
</style>
</head>
<body>
<div
id="anim1">
<iframe
src="http://www.c-sharpcorner.com/"
WIDTH="500"
HEIGHT="500"></iframe>
</div>
</body>
</html>
![4.gif]()
Step8: Run the code
on your browser.
Output
![3.gif]()