CSS rotating causes change in size of clip image

Question

What: I am attempting to make a UI for a project. I wanted to have several small white rectangle over an image and be able to rotate the rectangles to create a horizontal blinds effect. All went well in chrome but when I explored how it looked in safari I was hit with some confusion.

Code snippet:

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

To rotate create the clip I'm using the following

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;

Problem: In safari the rectangle clip is shortened to less then half of its size unless its at rotationX=0deg.

Any help would be great.

What have I tried: Well the position is set to absolute which was all I really knew to check in this case. I am at a lost what could cause this behavior.

Example: See the image below set to 10 degrees.

And here when set to 0 degrees.

Note: That even when set to 2 degrees the clip still remains less then half its size.

Answer 1

Personally i would go with a much simpler approach, and not use any kind of rotations and/ or transform. If all you want to achieve is the "blinds" effect, I would go with just animating the height of the rectangles, and enjoy a much wider support, and less vendor-specific css...

Check it here: 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'));
});