HTML
<div class="wrapper">
<div class="parent">
<div class="child">
lorem ipsum
</div>
</div>
</div>
CSS
.wrapper {
width: 300px;
height: 300px;
margin: 30px auto;
border: 1px dashed #ccc;
overflow:hidden;
}
.parent {
width: 1px;
height: 100px;
background-color: #f00;
opacity: 0;
margin: 0 auto;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrapper:hover .parent {
opacity: 1;
-webkit-transform: scaleX(300);
transform: scaleX(300);
}
.wrapper . parent .child {
-webkit-transform: none;
transform: none;
}
我只想在悬停 .wrapper div 时缩放 .parent 元素。但它也会影响两个 div(父和子),尽管为 .child div 提供 transform:none 属性。如何防止 .child 受影响?
最佳答案
尝试改变宽度而不是 transform: scaleX
.wrapper:hover .parent {
opacity: 1;
width: 100%;
}
http://jsfiddle.net/cdmkoao4/3/
更新:
老实说,我看不出有任何理由让您使用 scaleX
而不是 width
,但这是我想出的唯一解决方案。不要将 .child
与 .parent
嵌套,使用 position: absolute
将它们分开。悬停时,您将scaleX
仅.parent
,而您将仅更改.child
的opacity
(我仍然使用相同的类,即使它们不再具有 parent-child
状态)。
http://jsfiddle.net/cdmkoao4/9/
您需要使用 transition-delay
时间来获得您想要的确切效果。
关于html - 如何防止 child 受到 css3 中变换比例的影响?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25339497/