如何在CSS中旋转背景图像？

Question

我有一个自定义的radiobutton图像。 当某人选择该选项时，我试图单独旋转背景图像。 但它会旋转整个div。

这是我的部分工作jsFiddle

ul.pt-answers > li > label > input:checked +img {  
    background: url(http://www.opinionpoll.in/files/images/vote_symbol.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:30px 30px;
    -webkit-animation:spin 0.5s ease 1 both;
    -moz-animation:spin 0.5s ease 1 both;
    animation:spin 0.5s ease 1 both;
    border:none;

}


@-moz-keyframes spin { 100% { -moz-transform: rotate(30deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(30deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(30deg); } }

Answer 1

我建议你使用<div>元素标签而不是<img>这样你就可以在其中创建一个伪::before元素。 你可以指定css select来创建伪::before元素，分配背景属性并应用spin，viola！

你可以在这里看到我在你的更新小提琴里的意思。

在此获取更多信息。

编辑：拼写