エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル
というわけて、まずは実際のデモをご覧ください! See the Pen 3D Panel Flip Motion on Mouse Over by ... というわけて、まずは実際のデモをご覧ください! See the Pen 3D Panel Flip Motion on Mouse Over by digistate (@digistate) on CodePen. JavaScript は Masonry 関連の処理のみを記述しているので、マウスオーバーのフリップモーションに関してはすべて CSS のみで表現しています。 HTMLの構造 パネルとなるそれぞれの画像の部分は、articleタグで括ってあり、その中の構造は以下のようになっています。 <article> <div class="item"> <!-- 前面ここから --> <div class="item-img" style="background-image:url(画像URL);"></div> <!-- 前面ここまで --> <!-- 背面ここから --> <div