3D変換/トランジションを使用してCSS3アニメーション効果を試しています。私はHTMLコンテナを持っています。これは、効果的に「タイル」に分割され、その上に別のレイヤーがあります。私がやりたいのは、個々のタイルに「フリップ」効果を作成することです。
レイヤーの1つがプレーンHTML（テキストなど）である場合を除いて、このようになります。
.sub {
-webkit-transition: -webkit-transform 0.6s linear;
}
.flip {
-webkit-transform: rotate3d(1,0,0,90deg);
}
これをしばらく考えた後、それが可能かどうかさえわかりません。これが私が試みたものです。
- バックレイヤーとしてテキストを含むコンテナー。
- 上にタイルを重ねます。1つのタイルの不透明度をゼロに設定して、「ウィンドウ」を作成します。
- 次に、変換をバックレイヤーに適用します。
- 最初のレイヤーと同じ3番目のレイヤーを上に追加します。
これはほとんど機能しますが、実際には機能しません。「ウィンドウ」は適切に反転しますが、もちろん、最上層はウィンドウの上に表示されたままであり、効果が損なわれます。
この部分的な反転効果を達成する方法はありますか？