什么：我正在尝试为项目创建UI.我希望在图像上有几个小的白色矩形,并能够旋转矩形以创建水平百叶窗效果.一切都很顺利,但是当我探索它在野生动物园中的表现时,我感到有些困惑.
代码段：
<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,100px,0px);
transform-origin: 320px 75px;
问题：在safari中,矩形剪辑缩短到小于其大小的一半,除非它在rotationX = 0deg.
任何帮助都会很棒.
我尝试了什么：好的位置设置为绝对位置,这是我真正知道要检查的情况.我迷失了可能导致这种行为的原因.
例：
请参见下图设置为10度.
这里设置为0度.
注意：即使设置为2度,剪辑仍然小于其大小的一半.
解决方法
我个人会采用更简单的方法,而不是使用任何种类的旋转和/或变换.
如果您想实现的只是“百叶窗”效果,我只需动画矩形的高度,并享受更广泛的支持,并减少供应商特定的CSS …
如果您想实现的只是“百叶窗”效果,我只需动画矩形的高度,并享受更广泛的支持,并减少供应商特定的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'));
});
