css怎么让div旋转不改变形状,如何让DIV更大，因为它旋转（CSS3动画）

div {

margin: 100px;

width: 100px;

height: 100px;

background: #f00;

-webkit-transition: all 200ms ease;

-moz-transition: all 200ms ease;

-ms-transition: all 200ms ease;

transition: all 200ms ease;

}

div:hover {

margin: 50px;

width: 200px;

height: 200px;

-webkit-animation-name: spin;

-webkit-animation-duration: 4000ms;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-name: spin;

-moz-animation-duration: 4000ms;

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-ms-animation-name: spin;

-ms-animation-duration: 4000ms;

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

animation-name: spin;

animation-duration: 4000ms;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

@-ms-keyframes spin {

from { -ms-transform: rotate(0deg); }

to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

from { -webkit-transform: rotate(0deg); }

to { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

from {

transform:rotate(0deg);

}

to {

transform:rotate(360deg);

}

}