缩放父元素,但删除子元素的缩放 [英] Scale parent element but remove scaling on child elements
本文介绍了缩放父元素,但删除子元素的缩放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前正在使用 scale
制作一些CSS动画。有没有一种方法可以限制子元素不缩放,而只有父元素可以缩放。
I'm currently working on some css animation using scale
. Is there a way to restrict child elements not to scale and only the parent element will scale.
.scale {
max-width : 200px;
height : 200px;
background-color : beige;
-webkit-transition: transform 0.3s linear;
-webkit-transform-origin : top left;
}
.scale:hover {
-webkit-transform : scale(2.0);
-webkit-transition: transform 0.3s linear;
}
.scale:hover .dont-scale {
-webkit-transform : scale(1.0);
}
<div class="scale">
<div class="dont-scale">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
推荐答案
.scale:hover .dont-scale {}
在.scale:hover {之后运行}
,因此scale(1)比scale(2)度量,因此,孩子将被缩放为同一父对象。
.scale:hover .dont-scale {}
run after.scale:hover {}
,so scale(1) Measure than scale(2) ,for this reason child will be scaled same parent.
尝试以下操作:
.scale:hover .dont-scale{
-webkit-transform : scale(0.5);
transform : scale(0.5);
}
为避免出现保证金问题:
To avoid margins issue:
.dont-scale{
-webkit-transform-origin : top left;
-webkit-transition: transform 0.3s linear;
}
.scale {
max-width : 200px;
height : 200px;
background-color : beige;
-webkit-transition: transform 0.3s linear;
-webkit-transform-origin : top left;
transition: transform 0.3s linear;
transform-origin : top left;
}
.dont-scale{
-webkit-transform-origin : top left;
-webkit-transition: transform 0.3s linear;
transform-origin : top left;
transition: transform 0.3s linear;
}
.scale:hover {
-webkit-transform : scale(2.0);
-webkit-transition: transform 0.3s linear;
transform : scale(2.0);
transition: transform 0.3s linear;
}
.scale:hover .dont-scale{
-webkit-transform : scale(0.5);
transform : scale(0.5);
}
<div class="scale">
<div class="dont-scale">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
这篇关于缩放父元素,但删除子元素的缩放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文