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

Question

什么：我正在尝试为一个项目制作 UI。我想在图像上有几个小的白色矩形，并能够旋转矩形以创建水平百叶窗效果。 chrome 中一切都很顺利，但是当我探索它在 safari 中的外观时，我感到有些困惑。

代码 sn-p：

<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 中，矩形剪辑被缩短到其大小的一半以下，除非它的旋转 X=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'));
});

Answer 2

我不明白，你为什么要使用clip。

如果我是，我会那样做：http://jsfiddle.net/maximgladkov/y9bQv/

HTML

<figure>
    <img src="http://waldorfastoria3.hilton.com/resources/media/wa/EYWRRWA/en_US/img/shared/full_page_image_gallery/main/WA_beach_8.jpg"
    />
    <div class="blinds">
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
    </div>
</figure>

CSS

figure {
    float: left;
    position: relative;
}

img {
    display: block;
}

.blinds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blind {
    width: 100%;
    height: 10%;
    background: white;
    position: relative;
    -webkit-animation: blind 5s both infinite;
}

@-webkit-keyframes blind {
    from {
        -webkit-transform: rotateX(90deg);
    }

    to {
        -webkit-transform: rotateX(270deg);
    }
}

它只适用于WebKit浏览器，如果需要更多，请添加更多前缀属性。