JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css3 Rotate</title>
</head>
<body>
	
	<div class="rotate"></div>

</body>
</html>

CSS

/* 	.rotate {
	  background-color: blue;
	  width: 200px;
	  height: 200px;
	  transition: transform .8s;
	     -webkit-transition: - */webkit-transform .8s ease-in-out; */
    	/* -ms-transition: -ms-transform .8s ease-in-out; */ 
		
	}

	.rotate:hover {
		transform:rotate(90deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-webkit-filter: grayscale(100%);
	}