鼠标悬停在背景图像上的过渡

Question

我想在我的链接背景上实现一个简单的过渡，即图像，这样当我悬停它时，背景图像应该会旋转一点。

这是我有的，但它不起作用：

<div class="vegetable"><a href="#">link</a></div>

.vegetable a {
    background: url(../img/icons/carrot.png) no-repeat ;
    padding-left: 40px;
    color: #fff;
    font-size: 2em;
    line-height: 42px;
    background-size: 32px;
    width: auto;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;


}
.vegetable a:hover {

    /* Firefox */
    -moz-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* WebKit */
    -webkit-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Opera */
    -o-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Standard */
    transform: scale(1.1) rotate(30deg) translate(-5px);
}

Answer 1

为了得到你想要的结果，你需要使用伪元素作为背景和旋转，这样你就不会影响链接

见 sn-p：

.vegetable a {
  padding: 40px;
  color: #fff;
  font-size: 2em;
  line-height: 42px;
  background-size: 32px;
  width: auto;
  position:relative;
  display:inline-block;
  overflow:hidden;
}

.vegetable a:after {
  content:'';
  background: url(https://www.w3schools.com/css/img_fjords.jpg) no-repeat;
  background-size: cover;
  /* Standard */
  transition: all 1s ease;
  display:inline-block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  
}


.vegetable a:hover:after {
  /* Standard */
  transform: scale(1.1) rotate(30deg) translate(-5px);
}

<div class="vegetable"><a href="#">link</a></div>