1

私のウェブサイト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では機能しない理由について、何か洞察をいただけますか?

4

0 に答える 0