Question

什么：我正在尝试为项目制作用户界面。我希望在图像上有几个小的白色矩形，并能够旋转矩形以创建水平百叶窗效果。一切都很顺利，但当我探索它在野生动物园中的表现时，我感到有些困惑。

代码段：

<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度。

enter image description here

这里设置为0度。 enter image description here

注意：即使设置为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浏览器，如果需要更多，请添加更多前缀属性。

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

2 个答案: