图像变换旋转不旋转答案

【问题标题】：Image transform rotate not rotating图像变换旋转不旋转
【发布时间】：2016-04-30 05:14:18
【问题描述】：

我正在尝试获取 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>

【问题讨论】：

您是否尝试过添加过渡值？尝试将 #x-close{transition: all 400ms ease;} 添加到您的 CSS
您还使用 translate 来移动中心，因此旋转将固定在中间。所以在旋转后您需要反转平移以将其放回相同位置（但旋转)。我不知道你是否可以像这样排队 css 翻译/旋转......
过渡时间有所帮助。那么，@PeteB 你是说要做#x-close:hover after{} 之类的事情吗？
其实这是重复的：*.com/questions/17619217/… 所以你应该先看看那里
@PeteB：取决于贝基想要做什么。我不认为这里的目的是为了连续轮换（假设基于所描述的内容）而且问题不是问如何实现，而是问为什么 他们尝试过的方法不起作用。所以，我不认为这是 100% 的骗局。但是，意见可能会有所不同:)

标签： html css transform css-transforms

【解决方案1】：

由于您在悬停时添加的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>

【讨论】：

【解决方案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%) ; 
    }

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

应该这样做：

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

【讨论】：

这不会绕左下角旋转吗？