<div class="container">
  <div class="wrap">
    <div class="element element-1">
      <kbd>50% 50%</kbd>
    </div>
  </div>
  <div class="wrap">
    <div class="element element-2">
      <kbd>top left</kbd>     
    </div>
  </div>
  <h3><kbd>transform-origin</kbd></h3>
  <div class="wrap">
    <div class="element element-3">
      <kbd>110% 110%</kbd>      
    </div>
  </div>
  <div class="wrap">
    <div class="element element-4">
      <kbd>50px 50px</kbd>      
    </div>
  </div>
</div>

*{box-sizing:border-box}
body {margin: 0;overflow-x:hidden}
.container {
  margin: 0 auto;
  max-width: 580px;
}
.wrap {
  width: 120px;
  height: 120px;
  background: #E6E0CA;
  display: inline-block;
  margin: 80px;
}
h3{margin:0;text-align:center}
@-webkit-keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}
@keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}
.element {
  width: 120px;
  height: 120px;
  color: white;
  text-align: center;
  line-height: 120px;
  -webkit-animation: rotate 6s linear infinite;
  animation: rotate 6s linear infinite;
}
.element-1 {
  background: #FFCC00;
}
.element-2 {
  background: #FF9900;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}
.element-3 {
  background: #875678;
  -webkit-transform-origin: 110% 110%;
  -ms-transform-origin: 110% 110%;
  transform-origin: 110% 110%;
}
.element-4 {
  background: #00E4F6;
  -webkit-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
}
@media (max-width: 580px){
  .wrap {
    display: block;
  margin: 80px auto;
}
}