みなさんこんにちは！おさかなです！
今回は『CSS 3D Transform Examples』について、書いていこうと思います！
それでは、レッツゴー！！！！！
『CSS 3D Transform Examples』って何？
『CSS 3D Transform Examples』とは、Web上で使える3Dデザインをコピペで実装できる、CSSコードまとめサイトです。hoverアニメーションで動きのあるものを作れたり、Codepenを使ってカスタマイズすることも！
Webサイトを華やかにしたいときにも、おすすめのサイトです✨(いいね～)
Beautiful CSS 3D Transform Perspective Examples in 2024 | Polypane
Beautiful CSS 3D transform examples using a single div that you can copy with one click!
polypane.app
【ぐるぐる】「読み込み中」のアニメーションが見つかる！【CSS loaders and Spinners】とは？
みなさんこんにちは！おさかなです！今回は「CSS loaders and Spinners」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・読み込み中のデザインを探している方・ローディング...
osakanav.com
2021.11.27
実際に使ってみよう！
3Dデザイン・アニメーションを探そう！
それでは早速サイトにアクセスしましょう！
ページをスクロールすると、このように「3Dデザイン」を確認できます。
実際にマウスカーソルを乗せると、こんな感じで「アニメーションの挙動」をチェックできます！(どれも素敵～)
ちなみにコードをコピーしたときのアニメーションもおしゃれなので、ぜひ試してみてください。
デザインは使いやすいシンプルなものが多くあります。
(なんか魔法のじゅうたんみたい。笑)
【Webデザイン】水玉・ポルカドット生成ジェネレーターとは？
みなさんこんにちは！おさかなです！今回は「Polka Dot Generator」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・水玉模様・ポルカドットを生成したい方・Webデザインを作成...
osakanav.com
2023.01.03
CSSコードをコピーしよう！
気になるデザインのものを見つけたら「Copy CSS」をクリック！
↓実際にコピーしたコード（CSS）
div { transform: perspective(2000px) translate3d(0px, -66px, 198px) rotateX(-55deg) scale3d(0.86, 0.75, 1) translateY(50px); border-radius: 5px; will-change: transform; transition: 0.4s ease-in-out transform; &:hover { transform: scale3d(1, 1, 1); } }ちなみに「Codepen」を押すと……？
このように「ソースコードを編集」することもできます！(おお！)
配色やアニメーションの速度など、細かい変更をしたい方はご活用ください。🌸
コードは「黒い画面」、実行結果は「白い画面」に表示されます。ぜひご自身でカスタマイズして、よりサイトに合うデザインを作ってみてくださいね！(お疲れ様です☕)
Bitly
amzn.to
おさかな
セブンの「レトロかわいいプリンアイス」食べたい！🍮
ナビまる
先月はがんばったしご褒美かな？笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
【HTML】ボタン・チェックボックスなど、コピペデザインまとめサイト
みなさんこんにちは！おさかなです！今回は「CSSButtons.io」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・HTML/CSSのコピペボタンを探している方・おしゃれなWebデザイン...
osakanav.com
2023.01.01
