CSS hover effect on rotating div - css

Question

I have div which I'm continuously rotating using transform rotate (which is working). I then want to be able to scale the div when I hover over the rotating div. I can't get this to work, it does scale when I remove the rotation but I want it to rotate and then scale on hover.
Here is a demo pen i have created: (I'm using sass)
http://codepen.io/HJBdev/pen/BWVMjZ
<div class="spin">
</div>
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}

Answer 1

Wrap it in a container div to Re-scale on hover, then make the .spin div 100%
Like so:
HTML:
.cont {
height: 50px;
width: 50px;
}
.cont:hover {
height: 75px;
width: 75px;
transition: .5s;
}
.spin {
height: 100%;
width: 100%;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<div class="cont">
<div class="spin">
</div>
</div>

Answer 2

You can create a new animation for the hover that includes the scale.
Like this:
#-webkit-keyframes rotationScale {
from {
-webkit-transform: rotate(0deg) scale(1.3);
}
to {
-webkit-transform: rotate(359deg) scale(1.3);
}
}
Then just use it instead on hover:
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
-webkit-animation: rotationScale 7s infinite linear;
}
}

Answer 3

Without adding any more HTML elements or a wrapper for them, you can use this CSS. And it maybe worth noting that the transition effect makes it more visually appealing to the user because it changes over a chosen duration rather than trying to change in an instant.
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
transition:height 1.5s, width 1.5s;
&:hover {
height:8em;
width:8em;
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}