3

たくさんのボックスがあるページがあります。ボックスには4種類あります。4つの異なるcss3トランジションが必要です。

ボックス1-ホバーでY軸を反転<-これは問題なく動作します
ボックス2-ホバーでX軸を反転<-これは問題なく動作します
ボックス3-ホバーでフェード効果<-これは完璧に動作します
ボックス4-X軸とY軸を斜めに反転しますホバー時<-このソートは最初は機能しますが、その後は機能しません

各ボックスには同じマークアップがあります。

<div class="box box-4">
    <div class="inner-container">
        <div class="front"><img src="some_pic.jpg"></div>
        <div class="back">
            <div class="tools"><!-- some links and stuff --></div>
        </div>
    </div>
</div>

したがって、ボックス4が開始されたとき、それは完璧に見えます。前面は正しい方向にあり、背面は本来あるべき姿で隠されています。それにカーソルを合わせると、アニメーションは右に始まり、対角軸（左上隅から右下隅）で反転しますが、アニメーションが終了すると、前面（背面の後ろに表示されますが、逆になります）背中に垂直です！

ここに画像の説明を入力してください

私は考えられるすべての方法でCSS値を微調整しました、私はたくさんのデモを見ました、何が問題なのですか？！

CSS：

.box-4 { -webkit-perspective:1200px; }
.box-4 .inner-container { 
       width:100%; height:100%; position:relative; 
       -webkit-ransition:all 0.4s ease-in-out; 
       -webkit-transform-style:preserve-3d; 
}
.box-4 .back { 
    width:100%; height:100%; position:absolute; top:0; left:0; 
    background-color:rgba(0,0,0,.6); 
    -webkit-backface-visibility:hidden; 
    -webkit-transform-style:preserve-3d; 
 }
.box-4:hover .inner-container { -webkit-transform:rotate3d(45,45,0,180deg); }
.box-4 .back { -webkit-transform:rotate3d(45,45,0,-180deg); }

注：ここでは簡単にするために-webkit-スタイルのみを示していますが、実際のCSSには、-moz-、-o-、-ms-、および通常のプレフィックスなしのバリアントもあります...

4

1 に答える 1

1

ええと...私は、これら2つの色を維持しながら、前面と背面のCSSを切り替え、かつては背面で現在は前面になっている変換を削除することで、機能するようになりました。（変換は私が最初に理解したものでした。あなたのオリジナルでは、背面の変換はホバー変換によって元に戻され、通常のように方向付けられていたためです（水平方向に整列）が、一度削除すると、色は何らかの理由で切り替えました。）

http://jsfiddle.net/6KLYs/4/

-webkit-ただし、代わりに（SafariとChrome、私は信じますか？）を使用するブラウザで動作するかどうかはわかりません-moz-。

最終的なオリエンテーションをどのように行うかについて明確にしたので、これがあなたが望むように機能するはずだと私が信じているものです。少し元に戻し、透明度を追加し、回転に合わせてホバー変換にスケーリング操作を含めました。

http://jsfiddle.net/6KLYs/6/

z軸でさらに90度回転することもできますが（http://jsfiddle.net/6KLYs/7/）、スケーリングの方が見栄えがよいと思います。

于 2012-07-27T14:33:07.707 に答える