CSS rotating causes change in size of clip image

css, html, safari, webkit

Solution

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'));
});

Problem

Original source