我试图获得一个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度旋转会产生相同的输出。可以添加过渡以查看旋转(或)更改旋转角度。
.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>
工作演示
在代码中添加这是css:
#x-close{
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%) ;
}
这是我的解决方案
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(180deg); }
}
@keyframes spin {
100% {
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
}
https://jsfiddle.net/hk2ums6p/
这应该做到:
#x-close:hover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: transform 0.5s ease;
transition: transform 0.5s ease;
}