参见英文答案 >
White space around css3 scale 5个
我对比例转换有一点问题.我希望调整大小元素,但是当我这样做时,我的旧尺寸占据了空间,而下一个元素经历了这个旧尺寸.如何删除此约束?
我对比例转换有一点问题.我希望调整大小元素,但是当我这样做时,我的旧尺寸占据了空间,而下一个元素经历了这个旧尺寸.如何删除此约束?
HTML
<!-- White space with Scale --> <div class="scale"></div> <div class="scale"></div> <!-- Whitout Scale --> <div></div> <div></div>
CSS
div:nth-of-type(even) { background: blue; } div:nth-of-type(odd) { background: red; } div { width: 100px; height: 100px; } .scale { transform: scale(0.5); transform-origin: top left; }
JSfiddle:https://jsfiddle.net/c7d2s21y/
感谢您的答复.
解决方法
var scaleto = 0.5,itemWidth = $('.scaleB').width(),itemHeight = $('.scaleB').height() ; function scaleThis(meausure) { var output = meausure * scaleto; return output; } $('.scaleB').on({ 'mouSEOver': function(event) { $(this).css({ 'width' : scaleThis(itemWidth) + 'px','height' : scaleThis(itemHeight) + 'px' }); },'mouSEOut': function(event) { $(this).css({ 'width' : itemWidth + 'px','height' : itemHeight + 'px' }); } });
.wrapper { background-color: #cccccc; } .wrapper:after { content: "normal"; } .wrapperScale { background-color: #dddddd; } .wrapperScale:after { content: "wrapped"; } .wrapper_jQuery:after { content: "jQuery"; } .wrapper div:nth-of-type(even),.wrapperScale div:nth-of-type(even) { background: blue; } .wrapper div:nth-of-type(odd),.wrapperScale div:nth-of-type(odd) { background: red; } .scale,.wrapperScale div,.scaleB { width: 50px; height: 50px; } .scale:hover,.wrapperScale:hover { transform: scale(0.5); transform-origin: top left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wrapper"> <!-- White space with Scale --> <div class="scale"></div> <div class="scale"></div> </div> <!-- Whitout Scale --> <div class="wrapper wrapperScale"> <div></div> <div></div> </div> <!-- jQuery --> <div class="wrapper wrapper_jQuery"> <div class="scaleB"></div> <div class="scaleB"></div> </div>
这就是CSS转换实际上做的,它不会影响周围的元素,你可以尝试将DIV包装在另一个元素中并将缩放应用于该元素,但它不会影响外部的其他元素,只会影响内容,除此之外,您将不得不通过Java Script或js库(如jQuery)操纵DIV的实际大小.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。