JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<input type="checkbox">
<div class="rotation"></div>
<div class="translation"></div>
<div class="rottrans"></div>
<button class="scale">test</button>
<button class="matrix">test</button>

<section>
  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cat-relaxes-in-the-garden-royalty-free-image-468119524-1555623934.jpg?crop=0.461xw:0.692xh;0.454xw,0.225xh&resize=100:*" alt="cat">
  <span>Cat</span>
</section>

CSS

.blue {
  background: #ccf;
}
.blue div {
  background: green;
}

input:checked + div {
  background: red;
}
div {
  margin-bottom: 10px;
  width: 100px;
  height: 50px;
  background: orange;
  transition:
    opacity 3s linear,
    width 0.3s linear;
}
div:hover {
  opacity: 0.1;
  width: 300px;
}
.rotation:hover {
  transform-origin: 130px -10px;
  transform: rotate(10deg);
}
.translation:hover {
  transform: translate(10px, -20%);
}
.rottrans:hover {
  transform: rotate(20deg) translate(-20px, 50px);
}
.scale:hover {
  transform: scale(105%, 103%);
}
.matrix:hover {
  transform: matrix(a, b, c, d, x, y);
}

section {
  position: relative;
  width: 100px;
  height: 100px;
}
img {
  position: relative;
  z-index: 10;
  display: block;
  transition: all 1s ease 2s;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  padding-top: 30px;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 2em;
  box-sizing: border-box;
  border: 1px solid silver;
  transition: all 1s ease 2s;
  transform: scale(-1, 1);
  background: #ffa;
}
section:hover img {
  z-index: 1;
  transform: scale(-1, 1);
}
section:hover span {
  z-index: 10;
  transform: scale(1, 1);
}

JavaScript

document.body.onclick = function (){
	document.body.classList.toggle('blue');
};