<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate</title>
<style>
#rotate {
height:50px;
width:50px;
border-radius:0px 20px 0px 20px;
background-image: linear-gradient(to bottom left, #000, red, yellow, red, #000);
transition: transform 1s;
}
#rotate:hover {
-border-radius:0px 50px 0px 50px;
transform: rotate(360deg);
-height:100px;
-width:100px;
}
</style>
</head>
<body>
<div id="rotate"></div>
</body>
</html>