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

Question

我有一个自定义单选按钮图像。当有人选择该选项时，我试图单独旋转背景图像。但它会旋转整个 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元素，分配背景属性并应用旋转，中提琴!

你明白我的意思了in your updated fiddle here .

获取更多信息 here .

编辑:拼写