CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト

テクノロジーカテゴリーの変更を依頼記事元:

kachibito.net

5 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fkachibito.net%2Fcss%2Fcss%25E3%2581%25A7%25E7%2594%25BB%25E5%2583%258F%25E3%2581%25AB%25E3%2583%259E%25E3%2582%25A6%25E3%2582%25B9%25E3%2583%259B%25E3%2583%2590%25E3%2583%25BC%25E3%2581%25A7%25E6%258A%2598%25E3%2582%258A%25E3%2581%259F%25E3%2581%259F%25E3%2581%25BE%25E3%2582%258C%25E3%2581%259F%25E7%25B4%2599%25E3%2581%258C%25E5%25B1%2595" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://kachibito.net/css/css%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%83%9B%E3%83%90%E3%83%BC%E3%81%A7%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BE%E3%82%8C%E3%81%9F%E7%B4%99%E3%81%8C%E5%B1%95">CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト</a><a href="https://b.hatena.ne.jp/entry/kachibito.net/css/css%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%83%9B%E3%83%90%E3%83%BC%E3%81%A7%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BE%E3%82%8C%E3%81%9F%E7%B4%99%E3%81%8C%E5%B1%95">はてなブックマーク - CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト

Result 折りたたまれた紙をパタパタと広げるようなエフェクト少し長いコードになりますが、再利用でき... Result 折りたたまれた紙をパタパタと広げるようなエフェクト少し長いコードになりますが、再利用できるので一度書けば同じHTMLで実装可能です。 css.gallery { perspective: 700px; width: 50vw; display: flex; justify-content: center; align-it ems: center; flex-flow: row wrap; } ul { position: relative; width: 100px; height: 100px; margin: 0.1em; perspective-origin: center center; transf orm-style: preserve-3d; transf orm: rotateX(40deg); transition: all 0.4s; } ul:hover