From a575b1e2825798bd4bff79d3fb950df85b204b40 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Sat, 5 Sep 2020 07:59:19 -0400 Subject: [PATCH] 3d boxes background --- 3d-boxes-background/index.html | 20 ++++++++ 3d-boxes-background/script.js | 17 +++++++ 3d-boxes-background/style.css | 93 ++++++++++++++++++++++++++++++++++ 3 files changed, 130 insertions(+) create mode 100644 3d-boxes-background/index.html create mode 100644 3d-boxes-background/script.js create mode 100644 3d-boxes-background/style.css diff --git a/3d-boxes-background/index.html b/3d-boxes-background/index.html new file mode 100644 index 0000000..94bfc1f --- /dev/null +++ b/3d-boxes-background/index.html @@ -0,0 +1,20 @@ + + + + + + + + 3D Boxes Background + + + +
+ + + diff --git a/3d-boxes-background/script.js b/3d-boxes-background/script.js new file mode 100644 index 0000000..4f48d7a --- /dev/null +++ b/3d-boxes-background/script.js @@ -0,0 +1,17 @@ +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++) { + const box = document.createElement('div') + box.classList.add('box') + box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` + boxesContainer.appendChild(box) + } + } +} + +createBoxes() diff --git a/3d-boxes-background/style.css b/3d-boxes-background/style.css new file mode 100644 index 0000000..81fd9cf --- /dev/null +++ b/3d-boxes-background/style.css @@ -0,0 +1,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); +}