JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<i class="rotating-icon material-icons">expand_more</i>

CSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.rotating-icon {
  transition: transform 300ms ease;
  transform-style: preserve-3d;
  cursor: pointer;
  font-size: 48px;
}

.rotating-icon.rotate {
  transform: rotateX(180deg);
}

JavaScript

const icon = document.querySelector('i');

icon.addEventListener('click', () => {
	icon.classList.toggle('rotate');
});