html – CSS旋转会导致剪辑图像大小发生变化
发布时间:2020-12-30 23:49:21 所属栏目:资源 来源:网络整理
导读:什么:我正在尝试为项目创建UI.我希望在图像上有几个小的白色矩形,并能够旋转矩形以创建水平百叶窗效果.一切都很顺利,但是当我探索它在野生动物园中的表现时,我感到有些困惑. 代码段: figure id="blinds-window"img src=full/beach.jpg usemap="#map" alt c
什么:我正在尝试为项目创建UI.我希望在图像上有几个小的白色矩形,并能够旋转矩形以创建水平百叶窗效果.一切都很顺利,但是当我探索它在野生动物园中的表现时,我感到有些困惑. 代码段: <figure id="blinds-window"> <img src=full/beach.jpg usemap="#map" alt class=first> <img src=full/white.jpg usemap="#map" alt class=second> <img src=full/white.jpg usemap="#map" alt class=second> 要旋转创建剪辑我正在使用以下内容 figure img.second { transform: rotateX(-180deg) translateZ(1px); } figure img:nth-child(2) { clip: rect(0px,640px,50px,0px); transform-origin: 320px 25px; } figure img:nth-child(3) { clip: rect(50px,100px,0px); transform-origin: 320px 75px; 问题:在safari中,矩形剪辑缩短到小于其大小的一半,除非它在rotationX = 0deg. 任何帮助都会很棒. 我尝试了什么:好的位置设置为绝对位置,这是我真正知道要检查的情况.我迷失了可能导致这种行为的原因. 例: 这里设置为0度. 注意:即使设置为2度,剪辑仍然小于其大小的一半. 解决方法我个人会采用更简单的方法,而不是使用任何种类的旋转和/或变换.如果您想实现的只是“百叶窗”效果,我只需动画矩形的高度,并享受更广泛的支持,并减少供应商特定的CSS … 在这里查看:Fiddle Demo HTML <div id="container"> <img src="http://placehold.it/500x400&text=Your Image Here" /> </div> <input type="button" id="toggle" value="hide" /> CSS div.line {position:absolute;width:100%;background-color:white;transition:height 1.5s;} #container.show div.line {height:10%;} #container.hide div.line {height:0%;} JS var container = $('#container'); var numberOfLines = 10; var coverImage = function(){ for(var i = 0; i < numberOfLines; i++){ container.append('<div class="line"></div>'); } var lines = $('.line',container); var imageHeight = $('img',container).outerHeight(); var lineHeight = imageHeight/lines.length; lines.each(function(i){ $(this).css({ top: i*lineHeight }); }); container.addClass('hide'); }; coverImage(); $('#toggle').click(function(){ container.toggleClass('show hide'); $(this).val(container.attr('class')); }); (编辑:衡阳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |