spanタグをCSSでrotateしようとしたら、動かない！

hoge

spanタグはインライン要素なので、縦横指定できない。移動もできない。

 

ので、「display:inline-block;」でインラインブロックにすれば動くようになる。

 

spanにhoverしたらrotate（３６０度回転）するCSSアニメーション

span{
    display:inline-block; /* ★これが重要 */
    vertical-align:middle;
}
span:hover{
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate3d(0,0,0deg);}
	100% {-webkit-transform: rotate3d(0,0,360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate3d(0,0,0deg);}
	100% {-moz-transform: rotate3d(0,0,360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate3d(0,0,0deg);}
	100% {-ms-transform: rotate3d(0,0,360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate3d(0,0,0deg);}
	100% {-o-transform: rotate3d(0,0,360deg);}
}
@keyframes spin {
	0% {transform: rotate3d(0,0,0deg);}
	100% {transform: rotate3d(0,0,360deg);}
}

今回は keyframes animation でhover時に回転するようにしたけれど、「transition」でも動くはず。