CSS カードをめくる動きを再現する方法 - by Takumi Hirashima
CSS でカードをめくる動きを再現する方法を紹介します。 ベースのコードを紹介 コードの解説 スマホ対策 ベースのコードを紹介 CSSでカードをめくるような動きを再現する方法を紹介します。 いくつかポイントがありますので順を追って説明します。 まずは最初に、動きのサンプルとベースのコードを紹介します。 その場でめくれる動き その場でめくれる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div class="flip"> <div class="front"></div> <div class="back"></div> </div> めくれると大きくなる動き その場でめくれると大きくなる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。 ベースの HTML はこちら。 <div clas
[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri
レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。 Muuriとは「壁（Wall）」を意味するフィンランド語だそうです。 Muuri Muuri -GitHub Muuriの特徴 Muuriのデモ Muuriの使い方 Muuriの特徴 レスポンシブ対応 レイアウトのカスタマイズは自由自在 パネルのドラッグ&ドロップに対応 ネストされたグリッドに対応 高速で快適なアニメーション フィルタリングやソート機能を装備 IE9+もサポート MITライセンス Muuriのデモ デモでは、Muuriのさまざまなレイアウトを実際に楽しめます。 Gridのデモは、Masonryのようなグリッドレイアウトで
![[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7cdd21f5a4f44ea2e0e03c1b58a86ba838d4c8b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017120501-01.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
