是否仅在css中转换转换？ [英] Only transition a transform in css?

问题描述

您好，我只想转换我的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的比例缩放。它还向下移动95px，顶部：95px；

过渡工作，但它同时过渡刻度(1.25)和顶部：95px。

我希望使过渡(过渡：全1缓动；)仅在变换上起作用：比例(1.25)，而不是顶部：95px。

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

我尝试将"All"替换为"Transform"和"Scale"，但不起作用。

有人有什么建议吗？

谢谢！

推荐答案

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

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

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

这篇关于是否仅在css中转换转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！