body {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 936px;
}

.transitions ul {
  list-style: none;
  padding-left: 0;
  margin: -8px;
}

.transitions ul:after {
  content: "";
  display: table;
  clear: both;
}

.transitions li {
  display: block;
  width: 120px;
  height: 120px;
  padding: 8px;
  float: left;
}

.transitions li div {
  background-color: #0058a2;
  color: white;
  width: 120px;
  height: 120px;
  position: relative;
}

.transitions li span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

*[data-property] div {
  transition: all .3s;
}

*[data-property="opacity"] div {
  opacity: 0.1;
}

*[data-property="opacity"]:hover div {
  opacity: 1;
}

*[data-property="rotate"] div {
  transform-style: preserve-3d;
  transform-origin: center;
}

*[data-property="rotate"] div {
  transform: rotateY(0);
}

*[data-property="rotate"]:hover div {
  transform: rotateY(180deg);
}

*[data-property="scale"] div {
  transform: scale(1);
}

*[data-property="scale"]:hover div {
  transform: scale(1.2);
}

*[data-property="scale-rotate"] div {
  transform-style: preserve-3d;
  transform-origin: center;
}

*[data-property="scale-rotate"] div {
  transform: scale(1) rotateY(0);
}

*[data-property="scale-rotate"]:hover div {
  transform: scale(1.1) rotateY(180deg);
}