CSS поворот вызывает изменение размера изображения клипа

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; 

Проблема: В сафари прямоугольник клип сокращается до менее половины его размер, если его при вращении 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 браузерах, в случае необходимости добавьте дополнительные префиксы.