div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); /* Standard syntax */ } .droplet { background: mediumaquamarine; border-radius: 2% 50%; height: 100px; margin: 100px; transition: all 3s; transition-timing: ease-in-out; width: 100px; } .droplet:hover { transform: rotate(1080deg); } .square { background: Khaki; border-radius: 5px; height: 150px; margin: 100px ; transition: transform 1s; width: 150px; } .square:hover { transform: skewX(-20deg); } .square2 { background: salmon; border-radius: 5px; height: 75px; margin: 100px; transition: transform 1s; width: 75px; } .square2:hover { transform: rotate(90deg) scale(1.75) translateX(50px); }