CSS旋转会导致剪辑图像大小发生变化

Question

什么:我正在尝试为项目创建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, 640px, 100px, 0px);
transform-origin: 320px 75px;

问题:在safari中,矩形剪辑缩短到小于其大小的一半,除非它在rotationX = 0deg.

任何帮助都会很棒.

我尝试了什么:好的位置是绝对的,这是我真正知道要检查的情况.我迷失了可能导致这种行为的原因.

示例: 请参见下图设置为10度.

这里设置为0度.

注意:即使设置为2度,剪辑仍然小于其大小的一半.

Answer 1

我个人会采用更简单的方法,而不是使用任何种类的旋转和/或变换.如果您想要实现的只是"百叶窗"效果,我只需动画矩形的高度,并享受更广泛的支持,并减少供应商特定的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'));
});