JSFiddle - React, Tailwind, and code Playground

by nocturnesound

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: red;
		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%);
	}