[Malleys]

Произвольную точку вращения можно установить при помощи CSS-свойства transform-origin.

<style>

.box-border {
  margin: 15px 50px;
}

.box-border, .box {
  width: 100px;
  height: 100px;
  border: 1px dotted #808080;
  top: 0;
  left: 0;
  position: relative;
  display: inline-block;
}

.box {
  position: absolute;
  background-color: #ff8888;
  -webkit-transition: 0.5s all ease-in-out 0s;
}

.top_left_origin {
    -webkit-transform-origin: 0 0;
}

.top_left_origin:hover {
  -webkit-transform: rotate(360deg);
  -webkit-transition: 1s all ease-in-out 0s;
}

.center_origin:hover {
  -webkit-transform: rotate(360deg);
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: 1s all ease-in-out 0s;
}

</style>
<div class="box-border">
  <div class="box"></div>
</div>
<div class="box-border">
  <div class="box top_left_origin">transform-origin: 0px 0px;</div>
</div>
<div class="box-border">
  <div class="box center_origin">transform-origin: 50% 50%;</div>
</div>