是否仅在css中转换转换?

2022-09-06 00:00:00 html css css-transforms css-transitions

您好,我只想转换我的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的宽度。

相关文章