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选择以创建伪::before元素，分配背景属性并应用旋转，中提琴！

你可以看到我的意思in your updated fiddle here。

获取更多信息here。

编辑：拼写

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

1 个答案: