Post
Ask Question

Creating 3D animation using "iframe" in HTML5

Creating 3D animation using "iframe" in HTML5

 
Hi, everyone. You will be happy to know that we can create a 3D animation in HTML5. It is a very interesting and simple feature to work with. 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 JavaScript and some different styles along with HTML code.
 
Just go through the steps to learn how to create this application.
 
Step 1: Open an HTML editor or Visual Studio. This is where we will create an HTML5 application. If you are using Visual Studio:
  • Go to Solution Explorer
  • Right Click on the Application name
  • Select Add --> add new item
  • In the window that opens up, select an HTML page
  • Name this page as 3D animation
Step 2: Now set up the frame. Delete the code that is automatically generated in the HTML page we created. Write the following code below to begin:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>3D animation</title>  
  5.         <body></body>  
  6.     </html>​   
Step 3: Now create a frame in the Browser.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>3D animation</title>  
  5.         <body>  
  6.             <div id="transformation">  
  7.                 <iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>  
  8.                 </div>  
  9.             </body>  
  10.         </html>​  
Here we set the frame source and the dimensions of the frame that is embedded in the host browser. You may notice that a tag named <div id="transformation"> is also mentioned here, this is actually the reason for applying a transformation or animation effect to the frame. This will be explained later in the article.
 
Step 4 : See the style code below to add a style to the frame:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>3D animation</title>  
  5.         <style type ="text/css">  
  6.        #transformation {  
  7.         -webkit-perspective: 800;  
  8.         perspective: 800;  
  9.         margin: 100px 0 100px 50px;  
  10.       }    
  11.             <body>  
  12.                 <div id="transformation">  
  13.                     <iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>  
  14.                     </div>  
  15.                 </body>  
  16.             </html>​  
This is where 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 the style is applied to the frame.
 
Now to learn a bit more in-depth about the style that applied above. If you look at the lines of code defined for the style, they contain the line-webkit-perspective: 800; and perspective: 800; these lines are important to work with in 3D because these lines define the depth of 3D scene from values 1-1000
 
Step 5: Now add a mouse hovering effect to the frame. Write the following code:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>3D animation</title>  
  5.         <style type ="text/css">  
  6.        #transformation {  
  7.         -webkit-perspective: 800;  
  8.         perspective: 800;  
  9.         margin: 100px 0 100px 50px;  
  10.       }  
  11.        #transformation iframe:hover {  
  12.         -webkit-transform: rotate3d(0, 0, 1, 65deg);  
  13.         transform: rotate3d(0, 0, 1, 65deg);  
  14.       }    
  15.             <body>  
  16.                 <div id="transformation">  
  17.                     <iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>  
  18.                     </div>  
  19.                 </body>  
  20.             </html>​  
Here the method #transformation iframe:hover creates a mouse hover effect on the frame, so that when the mouse hovers over the frame it begins to rotate to 40 degrees
 
Step 6: The complete animation effect is created by the following code.
  1. #transformation {  
  2.        -webkit-perspective: 800;  
  3.        perspective: 800;  
  4.        margin: 100px 0 100px 50px;  
  5.      }  
  6.       #transformation iframe {  
  7.        -webkit-transition: -webkit-transform 3s ease-in-out;  
  8.        -webkit-transform: rotate3d(0, 1, 1, 60deg);  
  9.        transition: transform 1s ease-in-out;  
  10.        transform: rotate3d(0, 1, 1, 60deg);  
  11.      }  
  12.       #transformation iframe:hover {  
  13.        -webkit-transform: rotate3d(0, 0, 1, 65deg);  
  14.        transform: rotate3d(0, 0, 1, 65deg);  
  15.      }  
Step 7: Using these codes two to three times in the HTML code creates a more flexible rotation effect. This is the complete code.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>3D animation</title>  
  5.         <style type ="text/css">  
  6.        #transformation {  
  7.         -webkit-perspective: 800;  
  8.         perspective: 800;  
  9.         margin: 100px 0 100px 50px;  
  10.       }  
  11.        #transformation iframe {  
  12.         -webkit-transition: -webkit-transform 3s ease-in-out;  
  13.         -webkit-transform: rotate3d(0, 1, 1, 60deg);  
  14.         transition: transform 1s ease-in-out;  
  15.         transform: rotate3d(0, 1, 1, 60deg);  
  16.       }  
  17.        #transformation iframe:hover {  
  18.         -webkit-transform: rotate3d(0, 0, 1, 65deg);  
  19.         transform: rotate3d(0, 0, 1, 65deg);  
  20.       }  
  21.        #transformation {  
  22.         -webkit-perspective: 800;  
  23.         perspective: 800;  
  24.         margin: 100px 0 100px 50px;  
  25.       }  
  26.       #transformation iframe {  
  27.         -webkit-transition: -webkit-transform 2s ease-in-out;  
  28.         -webkit-transform: rotate3d(0, 1, 1, 50deg);  
  29.         transition: transform 1s ease-in-out;  
  30.         transform: rotate3d(0, 1, 1, 50deg);  
  31.       }  
  32.       #transformation iframe:hover {  
  33.         -webkit-transform: rotate3d(0, 0, 1, 50deg);  
  34.         transform: rotate3d(0, 0, 1, 55deg);  
  35.       }  
  36.        #transformation {  
  37.         -webkit-perspective: 800;  
  38.         perspective: 800;  
  39.         margin: 100px 0 100px 50px;  
  40.       }  
  41.        #transformation iframe {  
  42.         -webkit-transition: -webkit-transform 3s ease-in-out;  
  43.         -webkit-transform: rotate3d(0, 1, 1, 60deg);  
  44.         transition: transform 1s ease-in-out;  
  45.         transform: rotate3d(0, 1, 1, 60deg);  
  46.       }  
  47.        #transformation iframe:hover {  
  48.         -webkit-transform: rotate3d(0, 0, 1, 65deg);  
  49.         transform: rotate3d(0, 0, 1, 65deg);  
  50.       }  
  51.        #transformation {  
  52.         -webkit-perspective: 800;  
  53.         perspective: 800;  
  54.         margin: 100px 0 100px 50px;  
  55.       }  
  56.        #transformation iframe {  
  57.         -webkit-transition: -webkit-transform 4s ease-in-out;  
  58.         -webkit-transform: rotate3d(0, 1, 1, 750deg);  
  59.         transition: transform 1s ease-in-out;  
  60.         transform: rotate3d(0, 1, 1, 75deg);  
  61.       }  
  62.        #transformation iframe:hover {  
  63.         -webkit-transform: rotate3d(0, 0, 1, 80deg);  
  64.         transform: rotate3d(0, 0, 1, 450deg);  
  65.       }  
  66.        #transformation {  
  67.         -webkit-perspective: 800;  
  68.         perspective: 800;  
  69.         margin: 100px 0 100px 50px;  
  70.       }  
  71.        #transformation iframe {  
  72.         -webkit-transition: -webkit-transform 2s ease-in-out;  
  73.         -webkit-transform: rotate3d(0, 1, 1, 50deg);  
  74.         transition: transform 1s ease-in-out;  
  75.         transform: rotate3d(0, 1, 1, 50deg);  
  76.       }  
  77.        #transformation iframe:hover {  
  78.         -webkit-transform: rotate3d(0, 0, 1, 550deg);  
  79.         transform: rotate3d(0, 0, 1, 55deg);  
  80.       }  
  81.        #transformation {  
  82.         -webkit-perspective: 800;  
  83.         perspective: 800;  
  84.         margin: 100px 0 100px 50px;  
  85.       }  
  86.        #transformation iframe {  
  87.         -webkit-transition: -webkit-transform 3s ease-in-out;  
  88.         -webkit-transform: rotate3d(0, 1, 1, 60deg);  
  89.         transition: transform 1s ease-in-out;  
  90.         transform: rotate3d(0, 1, 1, 60deg);  
  91.       }  
  92.        #transformation iframe:hover {  
  93.         -webkit-transform: rotate3d(0, 0, 1, 650deg);  
  94.         transform: rotate3d(0, 0, 1, 65deg);  
  95.       }  
  96.     </style>  
  97.     </head>  
  98.     <body>  
  99.         <div id="transformation">  
  100.             <iframe src = "http://www.c-sharpcorner.com/" height= 300px width= 400px /iframe>  
  101.             </div>  
  102.         </body>  
  103.     </html>  
Output: To view the effect just hover the mouse over the image below and it will start rotating. 
 
Note: Be sure that if this doesn't work or the image remains and doesn't rotate, it means there is some problem in the browser support. Please use Safari or Chrome to see the effect clearly as earlier browser versions do not support <iframe> tags or other HTML5 tags.
  1. #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);}  


Similar Articles