Creating 3D animation using "iframe" in HTML5

Manoj Singh Panwar
May 21, 2012
28.8k
0
0
Article

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.

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