Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<style>
#test {
margin: auto;
border: 1px solid black;
width: 300px;
height: 200px;
background-color: orange;
color: white;
text-align: center;
}
#test:hover {
background-color: orange;
width: 570px;
height: 500px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<button onclick="fun c()">click to rotate</button>
<div id="test">
<h1>hello javascript! Click to rotate and hover your mouse over the element</h1>
</div>
<script>
function func() {
document.getElementById("test").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
document.getElementById("test").style.transition = "all 2s"; // Standard syntax
document.getElementById("test").style.textShadow = "5px 5px 1px black"; // set the text shadow
document.getElementById("test").style.borderRadius = "25px"; // allows you to add rounded corners to elements
// Code for Safari
document.getElementById("test").style.WebkitTransform = "rotate(30deg)";
// Code for IE9
document.getElementById("test").style.msTransform = "rotate(30deg)";
// Standard syntax
document.getElementById("test").style.transform = "rotate(30deg)";
}
</script>
</body>
</html> 
The most helpful JAVASCRIPT solutions