html - 只转换 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 px by, top: 95px;

过渡有效，但它同时过渡了比例(1.25)和顶部:95px。

我想做这样的转换(转换:所有 1 都容易；)只适用于 transform:scale(1.25) 而不是顶部:95px。

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

我尝试用“transform”和“scale”替换“all”，但没有用。

有人有什么建议吗？

谢谢!

Answer 1

I tried replacing "all" with "transform" and "scale" and it didn't work.

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