A Simple Example of Transform Property of CSS3

Introduction

 
In this article, we will be using the transform property to show a video like this: 
 
CSS1.jpg
 
Now we will write the code for that
 
Step 1
 
First, we create a table to show the names of the videos.
  1. <table cellpadding="2" cellspacing="2">  
  2.             <tr>  
  3.                 <td id="td1" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  4.                     onclick="ShowVideo1()">  
  5.                     I Love You  
  6.                 </td>  
  7.                 <td id="td2" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  8.                     onclick="ShowVideo2()">  
  9.                     Teri Meri  
  10.                 </td>  
  11.                 <td id="td3" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  12.                     onclick="ShowVideo3()">  
  13.                     Bin Tere  
  14.                 </td>  
  15.                 <td id="td4" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  16.                     onclick="ShowVideo4()">  
  17.                     Oh Hum Dum  
  18.                 </td>  
  19.                 <td id="td5" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  20.                     onclick="ShowVideo5()">  
  21.                     Tears in heaven  
  22.                 </td>  
  23.                 <td id="td6" style="font-weight: bold; color: white; font-size: 20px;" align="center"  
  24.                     onclick="ShowVideo6()">  
  25.                     Tere Mere Saath  
  26.                 </td>  
  27.                 <td id="main">  
  28.                     <iframe id="i1" width="400px" height="250px" src="http://www.youtube.com/embed/QqgJkkVaWk8"  
  29.                         frameborder="0" allowfullscreen></iframe>  
  30.             </tr>  
  31. </table> 
Here we will use 6 columns and one <iframe> tag to show the videos.
 
Step 2
 
Now we will set the transform property in order to show the columns in the specified style:
  1. <style>  
  2.  #td1  
  3.             {  
  4.                 width: 200px;  
  5.                 height: 100px;  
  6.                 background-color: Red;  
  7.                 -webkit-transform: perspective( 400px ) rotateY(-45deg);  
  8.             }  
  9.             
  10.             #td2  
  11.             {  
  12.                 width: 200px;  
  13.                 height: 100px;  
  14.                 -webkit-transform: perspective( 400px ) rotateY(45deg);  
  15.                 background-color: Red;  
  16.             }  
  17.             
  18.             #td3  
  19.             {  
  20.                 width: 200px;  
  21.                 height: 100px;  
  22.                 background-color: Red;  
  23.                 -webkit-transform: perspective( 400px ) rotateY(-45deg);  
  24.             }  
  25.             #td4  
  26.             {  
  27.                 width: 200px;  
  28.                 height: 100px;  
  29.                 background-color: red;  
  30.                 -webkit-transform: perspective( 400px ) rotateY(45deg);  
  31.             }  
  32.             
  33.             #td5  
  34.             {  
  35.                 width: 200px;  
  36.                 height: 100px;  
  37.                 background-color: Red;  
  38.                 -webkit-transform: perspective( 400px ) rotateY(-45deg);  
  39.             }  
  40.             
  41.             #td6  
  42.             {  
  43.                 width: 200px;  
  44.                 height: 100px;  
  45.                 background-color: red;  
  46.                 -webkit-transform: perspective( 400px ) rotateY(45deg);  
  47.             }  
  48.             #main  
  49.             {  
  50.                 -webkit-transform: translate(-650px,200px);  
  51.  }  
  52. </style> 
Now we will look at this code:
  • webkit-transform: perspective( 400px ) rotateY(45deg);
Here we specify the perspective and rotateY property of CSS3.
  • Perspective property: This property is only supported by Safari and Chrome. It specifies how many pixels are a 3d element placed from a view (in my case it's 400px).
  • RotateY: It defines the rotation relative to the y-axis (in my case its 45 degrees).
Here we also specify another peoperty, translate, to define the 2D translation:
  • webkit-transform: translate(-650px,200px);
Step 3
 
Now we will write the code, by which when we click on the name of the video it will be run like this, for this we first specify the function on the onclick event of the columns like this:
  1. <td id="td1" style="font-weight:bold;color:white;font-size:20px;" align="center" onclick="ShowVideo1()">I Love You</td> 
Now we will write the JavaScript code for this:
  1. <script language="javascript">  
  2.      function ShowVideo1() {  
  3.    
  4.                 document.getElementById('i1').src = "http://www.youtube.com/embed/TEk_KpLaRag";  
  5.             }  
  6.         </script>  
  7.         Here we will change the source of the  
  8.         <iframe>tag. So when we click on that particular column the video will be run. Like  
  9.             this, we will write the code for other columns:  
  10.             <script language="javascript">  
  11.                 function ShowVideo1() {  
  12.    
  13.                     document.getElementById('i1').src = "http://www.youtube.com/embed/TEk_KpLaRag";  
  14.                 }  
  15.                 function ShowVideo2() {  
  16.                     document.getElementById('i1').src = "http://www.youtube.com/embed/QqgJkkVaWk8";  
  17.                 }  
  18.                 function ShowVideo3() {  
  19.                     document.getElementById('i1').src = "http://www.youtube.com/embed/MI-0wy_qai0";  
  20.                 }  
  21.                 function ShowVideo4() {  
  22.                     document.getElementById('i1').src = "http://www.youtube.com/embed/0hL0tanw43o";  
  23.                 }  
  24.                 function ShowVideo5() {  
  25.                     document.getElementById('i1').src = "http://www.youtube.com/embed/Ei1eJokw6SY";  
  26.                 }  
  27.                 function ShowVideo6() {  
  28.                     document.getElementById('i1').src = "http://www.youtube.com/embed/8yMYpCHwVLE";  
  29. }  
  30.    
  31. </script> 
Output
 
So when we will click on "Bin Tere" the following video will be run:
 
CSS2.jpg


Similar Articles