みなさんこんにちは!おさかなです!
今回は『CSS 3D Transform Examples』について、書いていこうと思います!
それでは、レッツゴー!!!!!
『CSS 3D Transform Examples』って何?
『CSS 3D Transform Examples』とは、Web上で使える3Dデザインをコピペで実装できる、CSSコードまとめサイトです。hoverアニメーションで動きのあるものを作れたり、Codepenを使ってカスタマイズすることも!
Webサイトを華やかにしたいときにも、おすすめのサイトです✨(いいね~)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/b3eb5ad9154f2cc432bb54349b03fe86.png)
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!
![](https://osakanav.com/wp-content/uploads/2021/11/load-top-160x90.png)
【ぐるぐる】「読み込み中」のアニメーションが見つかる!【CSS loaders and Spinners】とは?
みなさんこんにちは!おさかなです!今回は「CSS loaders and Spinners」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・読み込み中のデザインを探している方・ローディング...
実際に使ってみよう!
3Dデザイン・アニメーションを探そう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/05/transform.png)
ページをスクロールすると、このように「3Dデザイン」を確認できます。
![](https://osakanav.com/wp-content/uploads/2023/05/transform1.png)
実際にマウスカーソルを乗せると、こんな感じで「アニメーションの挙動」をチェックできます!(どれも素敵~)
ちなみにコードをコピーしたときのアニメーションもおしゃれなので、ぜひ試してみてください。
![](https://osakanav.com/wp-content/uploads/2023/05/transform.gif)
デザインは使いやすいシンプルなものが多くあります。
![](https://osakanav.com/wp-content/uploads/2023/05/transform2.png)
(なんか魔法のじゅうたんみたい。笑)
![](https://osakanav.com/wp-content/uploads/2023/05/transform3.png)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-top-160x90.png)
【Webデザイン】水玉・ポルカドット生成ジェネレーターとは?
みなさんこんにちは!おさかなです!今回は「Polka Dot Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・水玉模様・ポルカドットを生成したい方・Webデザインを作成...
CSSコードをコピーしよう!
気になるデザインのものを見つけたら「Copy CSS」をクリック!
![](https://osakanav.com/wp-content/uploads/2023/05/4HDEIEKleRJoPeX1682939145_1682939157.png)
↓実際にコピーしたコード(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」を押すと……?
![](https://osakanav.com/wp-content/uploads/2023/05/4HDEIEKleRJoPeX1682939145_1682939252.png)
このように「ソースコードを編集」することもできます!(おお!)
配色やアニメーションの速度など、細かい変更をしたい方はご活用ください。🌸
![](https://osakanav.com/wp-content/uploads/2023/05/transform4.png)
コードは「黒い画面」、実行結果は「白い画面」に表示されます。ぜひご自身でカスタマイズして、よりサイトに合うデザインを作ってみてくださいね!(お疲れ様です☕)
![](https://osakanav.com/wp-content/uploads/2023/05/code-transform.gif)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/608b7c65fc927068845b401185ec6e9e.jpg)
Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集
\\40,000部突破したベストセラーが4年半ぶりの大改訂! // Webデザインに関わる全ての人へ 想像力を高める最新の良質サイト429選! 優れた実例を見ることは新しい作品を生み出す力になる! ! ・これからはじめる人に! ・打ち合わせのお供に! ・困った時のアイデア出しに! オススメ! 見るだけでWebデザインの...
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
セブンの「レトロかわいいプリンアイス」食べたい!🍮
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
先月はがんばったしご褒美かな?笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-top-160x90.png)
【HTML】ボタン・チェックボックスなど、コピペデザインまとめサイト
みなさんこんにちは!おさかなです!今回は「CSSButtons.io」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSのコピペボタンを探している方・おしゃれなWebデザイン...