仅在 css 中转换转换？

Question

您好，我只想转换我的 css 转换，而不是其他任何东西。很难通过文字来解释，所以请查看下面的代码：

HTML：

<section class="success">
    <ul>
       <li>
           <div class="circle-spin-wrapper">
               <img src="ellipse_sm_blue.png" >
           </div>
       </li>
    </ul>
</section>

CSS：

.circle-spin-wrapper {
    transition: all 1s ease;
}

.success li:hover .circle-spin-wrapper {
    transform:scale(1.25);
    position: relative;
    top: 95px;
}

如您所见，我有一个 div，当您将鼠标悬停在它上面时，它会缩放 1.25。它也向下移动 95 像素，顶部：95 像素；

过渡有效，但它会同时转换比例（1.25）和顶部：95px。

我想使过渡（过渡：全 1 轻松；）仅适用于 transform:scale(1.25) 而不是顶部：95px。

我知道它与转换 css 中的“all”关键字有关，但我不知道用什么替换它以仅针对转换。

我尝试将“all”替换为“transform”和“scale”，但没有成功。

有人有什么建议吗？

谢谢！

Answer 1

我尝试将“all”替换为“transform”和“scale”，但没有成功。

将“all”替换为“transform”正是您应该做的 - 这将导致转换仅适用于 transform 属性。在没有看到其余代码的情况下很难调试为什么它不工作 - 你能设置一个快速的 CodePen 吗？

Answer 2

.circle-spin-wrapper {
  transition: transform 1s ease;
  -webkit-transition: -webkit-transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
  transform: scale(1.25);
  position: relative;
  top: 95px;
}

<section class="success">
  <ul>
    <li>
      <div class="circle-spin-wrapper">
        <img src="test.jpg">
      </div>
    </li>
  </ul>
</section>

这应该可以。注意：“-webkit-transition：-webkit-transform 1s ease；”用于野生动物园

Answer 3

.circle-spin-wrapper {
    transition: transform 1s ease;
}

但它看起来有问题，因为.circle-spin-wrapper 没有设置宽度，所以它是页面的全宽，这意味着.circle-spin-wrapper 变为页面宽度的 125%，并且里面的图像移出页面。

解决方案？在.circle-spin-wrapper 上设置宽度。

Answer 4

正如你所说，在你的transition 中使用transform 而不是all。它确实有效！

可能是您缺少的供应商前缀。尝试添加它。

.circle-spin-wrapper {
    transition: transform 1s ease;
}

.success li:hover .circle-spin-wrapper {
    transform:scale(1.25);
    position: relative;
    top: 95px;
}

<section class="success">
    <ul>
       <li>
           <div class="circle-spin-wrapper">
               <img src="http://placehold.it/50x50" >
           </div>
       </li>
      </ul>
</section>