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. }
  10. #td2
  11. {
  12. width: 200px;
  13. height: 100px;
  14. -webkit-transform: perspective( 400px ) rotateY(45deg);
  15. background-color: Red;
  16. }
  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. }
  33. #td5
  34. {
  35. width: 200px;
  36. height: 100px;
  37. background-color: Red;
  38. -webkit-transform: perspective( 400px ) rotateY(-45deg);
  39. }
  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:
Here we specify the perspective and rotateY property of CSS3.
Here we also specify another peoperty, translate, to define the 2D translation:
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() {
  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() {
  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. }
  31. </script>
Output
So when we will click on "Bin Tere" the following video will be run:
CSS2.jpg