<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>Click the "Try it" button to rotate the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
function myFunction() {
// Code for Chrome, Safari, Opera
document.getElementById("myDIV").style.WebkitTransform = "rotate(20deg)";
// Code for IE9
document.getElementById("myDIV").style.msTransform = "rotate(20deg)";
// Standard syntax
document.getElementById("myDIV").style.transform = "rotate(20deg)";
}
</script>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the msTransform property. Newer versions of IE support the transform property (do not need the ms prefix)</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the WebkitTransform property.</p>
</body>
</html>