如何解决当放大其父元素时,如何将子元素的比例可视地反转为未转换
假设您有一个页面(黄色背景),其中的一个元素(灰线)带有一个子元素(红色虚线);所有相同的像素尺寸。灰色的父级将放大到1.5,这自然会使它的子级也放大。为了将孩子的大小明显地反转为1.0,我将孩子的比例设置为0.5。我希望孩子在视觉上可以还原为非变换的1.0,但事实并非如此。如果我将孩子的比例尺增加到0.66,则它似乎未按预期进行转换。这里有什么逻辑可适用吗?在父元素放大时以编程方式反转子元素的比例?谢谢!
#region,#scaled-up,#scaled-down {
position: relative;
width: 200px;
height: 100px;
}
#region {
background-color: yellow;
margin: 50px auto;
}
#scaled-up {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
#scaled-down {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
#scaled-up::before,#scaled-down::before {
content: '';
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
}
#scaled-up::before {
border: 2px solid grey;
}
#scaled-down::before {
border: 2px dotted red;
}
<div id="region">
<div id="scaled-up">
<div id="scaled-down"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。