こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、3D画像処理をJavaScriptで実装します。3Dといいつつ、2D画像をCSSを使って3Dっぽく見せる感じのアプリケーションですね^^
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>3D Boxes Background</title> </head> <body> <button id="btn" class="magic">Magic 🎩</button> <div id="boxes" class="boxes big"></div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾
次は、ページにスタイルをつけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { box-sizing: border-box; } body { background-color: #fafafa; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .magic { background-color: #f9ca24; color: #fff; font-family: 'Poppins', sans-serif; border: 0; border-radius: 3px; font-size: 16px; padding: 12px 20px; cursor: pointer; position: fixed; top: 20px; letter-spacing: 1px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); z-index: 100; } .magic:focus { outline: none; } .magic:active { box-shadow: none; transform: translateY(2px); } .boxes { display: flex; flex-wrap: wrap; justify-content: space-around; height: 500px; width: 500px; position: relative; transition: 0.4s ease; } .boxes.big { width: 600px; height: 600px; } .boxes.big .box { transform: rotateZ(360deg); } .box { background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif'); background-repeat: no-repeat; background-size: 500px 500px; position: relative; height: 125px; width: 125px; transition: 0.4s ease; } .box::after { content: ''; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg); } .box::before { content: ''; background-color: #f9ca24; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; transform: skewX(45deg); } |
ここまで実装すると以下のようになります。

JavaScriptの実装
3Dっぽく見せる処理はCSSがほぼやってくれるので、JavaScriptではboxクラスが付与されているHTML要素に「big」クラスを付け替えする処理と画像の配置処理を実装します。
要素を取得する
最初に、画面操作に必要な要素を取得します。
1 2 3 |
// 要素取得 const boxesContainer = document.getElementById('boxes') const btn = document.getElementById('btn') |
bigクラスの付け替え
clickイベントを登録します。これは、Magicボタンが押下された時に発火するイベントです。
1 2 |
// クリックイベントの登録 btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) |
classList.toggleで、bigクラスの付け替えをしています。
画像の配置
demoでは、画像(正しくは動画)が16個のブロックに別れて表示されていますが、実は、これらはもともと一つの画像だったのです。

cssのbackgroundPositionを設定すると、16個の画像の位置を個別に設定できるので、これで上手く調整すれば分割しているように見せることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// ボックスを作成 function createBoxes() { // 縦 for (let i = 0; i < 4; i++) { // 横 for (let j = 0; j < 4; j++) { // div要素作成 const box = document.createElement('div') // boxクラス付与 box.classList.add('box') // 画像位置の調整(一つのボックスの大きさは125*125) box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` // 要素を追加 boxesContainer.appendChild(box) } } } createBoxes() |
これで完成です。
おわりに
一つの画像を分割して表示したいという要望は、現場でもよくありますね。私が昔所属したチームでもそのようなことがありました。
その時はCSSの担当者が対応したので、どうやったのかな?と疑問を持つつスルーしてきましたが、その答えを知れてよかったです^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 要素取得 const boxesContainer = document.getElementById('boxes') const btn = document.getElementById('btn') // クリックイベントの登録 btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) // ボックスを作成 function createBoxes() { // 縦 for (let i = 0; i < 4; i++) { // 横 for (let j = 0; j < 4; j++) { // div要素作成 const box = document.createElement('div') // boxクラス付与 box.classList.add('box') // 画像位置の調整 box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` // 要素を追加 boxesContainer.appendChild(box) } } } createBoxes() |
コメントを残す
コメントを投稿するにはログインしてください。