トランジションを使用して CSS3 変換プロパティを使用する FLIP アニメーションを設定し、表示および非表示効果として Y アクセスでフリップするパネルを作成しました。
例 http://jsfiddle.net/L9wDd/84/
トランジションは Chrome と Safari (つまり -webkit- を使用) では美しく見えますが、-moz ではアニメーションが 3 次元ではありません。これはまだ機能しますが、-webkit- で見られる 3 次元のフリップが欠けています。不足しているもの:
.container {
position:relative; display:block;
-webkit-perspective:1000; -moz-perspective:1000; perspective:1000;
}
.panel {
margin:50px 100px 50px 100px; position:absolute; top:0; left:0; width:300px; height:300px; background:blue; border:5px solid rgba(0,0,0,0.3); border-radius:20px; padding:20px; color:#FFF; box-shadow:0 0 20px rgba(0,0,0,0.3); display:block; z-index:1; opacity:0;
-webkit-transition:all 1.2s; -moz-transition:all 1.2s;
-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden;
-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);
}
.panel.shown {
opacity:1; z-index:2;
-webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg);
}
.panel.seen {
opacity:0; z-index:1;
-webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);
}