我正在尝试获取 X 的图像,当它悬停在上面时我必须旋转 180 度,但它只是向上和向右移动而不是旋转。
我做错了什么,这看起来不像是旋转了 180 度?
.black {
background: #000;
width: 100%;
height: 400px;
}
.popup-close {
position: absolute;
top: 40px;
right: 40px;
}
#x-close:hover {
-webkit-transform: translate(50%, -50%) rotate(180deg);
transform: translate(50%, -50%) rotate(180deg);
}
<div class="black">
<a class="popup-close" data-popup-close="popup-1" href="#">
<img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
</a>
</div>
最佳答案
由于您在鼠标悬停时添加的 translate
变换,十字会向上(向右)移动。我相信您添加它是为了使元素居中,在这种情况下,最好将它添加到元素本身的默认状态。
旋转实际上正在发生但您没有看到它,因为十字旋转 180 度会产生相同的输出。您可以添加过渡以查看旋转(或)更改旋转 Angular 。
.black {
background: #000;
width: 100%;
height: 400px;
}
.popup-close {
position: absolute;
top: 40px;
right: 40px;
}
#x-close {
transform: translate(50%, -50%);
transition: transform 1s ease;
}
#x-close:hover {
-webkit-transform: translate(50%, -50%) rotate(180deg);
transform: translate(50%, -50%) rotate(180deg);
}
<div class="black">
<a class="popup-close" data-popup-close="popup-1" href="#">
<img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
</a>
</div>
关于html - 图像变换旋转不旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36951040/