Ex No: Transform Property
Aim: To rotate a div 150 degree around x axis.
Algorithm
Step1: Create a folder “Ex5” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Create a <div> tag with some text.
Step4: Add JavaScript code to access transform property to rotate the <div> tag 150 degree around x axis.
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Transform</title>	
  <style>
    header {
        text-align:center;
        height: 100px;
        background-color: BurlyWood ;
        padding: 10px;
        border-radius: 10px 10px 0px 0px;
    }
    footer {
        text-align:center;
        font-size: 12px;
        height: 50px;
        line-height: 50px;
        background-color: BurlyWood ;
        padding: 10px;
        border-radius: 10px;
    }
    article{
        width: auto;
        padding: 10px;
        margin:5px;
        overflow-x: auto;
    }
    div{
        background-color: skyblue;
        font-size: 50px;
    }
  </style>
  </head>
  <body>		
    <header>
      <h1>Transform Property</h1>
    </header>	
    <hr>
    <article>
      <div id="rdiv" >
        <p>
		  This text is transformed on X-axis by 150 Degree
		</p>
      </div>
    </article>
    <footer>
	  Developed by K Anbarasan
    </footer>
  </body>
  <script>
    var i=1;
    setInterval(rotate,75);
    function rotate()
    {
      var rotdiv = document.getElementById('rdiv');
      if(i>=150)
        i=1;
      else
        i++;
      rotdiv.style.cssText += "transform: rotateX("+i+"deg)";
    }
  </script>
</html>
Result: Thus JavaScript code is written to implement banner advertisement.