是否仅在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
的宽度。
相关文章