Edit in JSFiddle

body {
  margin: 20px;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}
.original,
.box {
  border-radius: 6px;
}
.original {
  float: left;
  margin: 20px;
  border: 1px dashed #888;
  background: #ddd;
}
.box {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  background: springgreen;
}
.box-1 {
  transform: scale(0.75);
}
.box-2 {
  transform: scale(1.25);
}

/* animation */
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
  animation: spin 5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div class="original">
  <div class="spin">
    <div class="box box-1">scale(0.75)</div>
  </div>
</div>

<div class="original">
  <div class="spin">
    <div class="box box-2">scale(1.25)</div>
  </div>
</div>