Question

我正在尝试获取X的图像，当它被盘旋时我必须旋转180度，但它只是向上移动而不是旋转。

我做错了什么，这看起来不像旋转180度？

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 1

由于您在悬停时添加的translate转换，交叉向上移动（并向右移动）。我相信你要添加它来使元素居中，在这种情况下，最好将它添加到元素本身的默认状态。

旋转 实际上正在发生 ，但您没有看到它，因为十字形的180度旋转会产生相同的输出。您可以添加转换以查看旋转（或）更改旋转角度。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 2

正在使用 Demo

在你的代码中添加这是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%) ; 
    }

Answer 3

这是我的解决方案

@-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/

Answer 4

这应该这样做：

#x-close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.5s ease;    
    transition: transform 0.5s ease;
}

图像变换旋转不旋转

4 个答案: