How to make a box rotate and scale in CSS? - html

Question

.box1{
width:200px;
height:200px;
background-color: #FFF8DC;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
}
.box1.hover {
-webkit-animation: moving-image 2s 1;
}
#-webkit-keyframes moving-image {
from { -webkit-transform: rotate(0deg) scale(1);
}
to { -webkit-transform: rotate(360deg) scale(1.3);}
}
<div class='box1'></div>
When you hover over a box I want it to increase its size and rotate it 360 degrees once. When you remove the cursor from the box I want it to go back to its original shape. I have put my code below and I don't know what's wrong with it.
.box1{
width:200px;
height:200px;
background-color: #FFF8DC;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
}
#-webkit-keyframes moving-image {
from { -webkit-transform: rotate(0deg) scale(1);
}
to { -webkit-transform: rotate(360deg) scale(1.3);}
}
.box1.hover {
-webkit-animation: moving-image 2s 1;
}

Answer 1

I think I have what you're looking for:
There is no need for webkit keyframes & all of that stuff. All I did was add a :hover effect and a css transition (which makes the spin effect)
.box1{
width:200px;
height:200px;
background-color: red;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
transition: all ease 1s;
}
.box1:hover{
transform: rotate(360deg) scale(1.3);
}
<div class="box1"></div>
Edit:
Your version would've worked fine as well if you change the
.box1.hover {
-webkit-animation: moving-image 2s 1;
}
to
.box1:hover {
-webkit-animation: moving-image 2s 1;
}

Answer 2

Both can be done with transform, like so:
.myClass {
transform: scale(1.3) rotate(360deg);
}
but to be on the safe side, you should take care of older browsers:
.myClass {
-moz-transform: scale(1.3) rotate(360deg);
-webkit-transform: scale(1.3) rotate(360deg);
-o-transform: scale(1.3) rotate(360deg);
-ms-transform: scale(1.3) rotate(360deg);
transform: scale(1.3) rotate(360deg);
}
The last line should be the standard css3 directive.