0

イントロアニメーションとして3D空間の要素を反転させるCSS3を使ったアニメーションを作りたいと思います。グーグル検索は、フリップアニメーションを行う方法を説明する多くの異なるウェブサイトを明らかにします-これがトップの結果です:http://davidwalsh.name/css-flip

しかし、問題は、これが私が望む方法ではないということです。これらのフリップはすべて、中央にヒンジで固定された回転ドアのように、フリップの中央が中央にあります。

私が望むフリップアニメーションは、左側にヒンジが付いた開いたドア(画面に垂直であるため表示されない)のように開始する必要があります-次にドアが閉じ、閉じたドアの正面が表示され、そこで停止します。私の場合、ユーザーがボタンをクリックすると、この要素がアニメーションをイントロとして使用して表示されます。

ソリューションはCSS3を使用する必要があり(javascriptも問題ありません)、Webkitでのみ機能することも問題ありません(他のブラウザーでまったく異なるアニメーションを実行します)

4

1 に答える 1

2

を使用しtransform-originます。互換性に注意してください。caniuse.comはリストしていません。ベンダーのプレフィックスを覚えておいてください。-webkit-transform-origin: 0% 50%.flippertransform-origin

于 2013-02-15T23:11:53.143 に答える