我刚刚在我的网站http://lju.me上发现 Safari 处理 CSS3 转换的方式与 Chrome 完全不同。该网站行为方式的主要要点是我有一个名为“warp”的外部 div,围绕着四个内部 div,如下所示
<div id="warp">
<div id="one" class="slice"></div>
<div id="two" class="slice"></div>
<div id="three" class="slice"></div>
<div id="four" class="slice"></div>
</div>
假设第一个内部 div 被点击。然后我将 .goOne 类应用到#warp
#warp.goOne {
// floating, positioning and transition code here
-webkit-transform: scaleX(4);
-moz-transform: scaleX(4);
transform: scaleX(4);
}
#warp.goOne div{
// floating, positioning and transition code here
-webkit-transform: scaleX(.25);
-moz-transform: scaleX(.25);
transform: scaleX(.25);
}
基本上,主要思想是在这个小提琴http://jsfiddle.net/qwdM4/(虽然我听说那里的失真并不那么糟糕(我没有野生动物园,所以我不知道))。你们能否告诉我为什么这在 Chrome 上完全可以正常工作,但在 Safari 上却不行?