私のウェブサイトhttp://lju.meで、Safari が CSS3 変換を Chrome とはまったく異なる方法で処理していることを知りました。サイトの動作の主な要点は、「ワープ」と呼ばれる外側の div が 4 つの内側の 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では機能しない理由について、何か洞察をいただけますか?