WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
पिक्सेल घड़ी
1262
Andev.web
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
21 June 2024
गोल्फ़ टॉगल
28 May 2025
ए कोड लेखक: emmanuelbossro2004
2 January 2025
3डी
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="clock"> <div class="row row--top"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="row row--bottom"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="hour-0" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="hour-1" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile number__tile--white"></div> <div class="number__tile"></div> <div class="number__tile number__tile--white"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="minute-0" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="minute-1" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile number__tile--white"></div> <div class="number__tile"></div> <div class="number__tile number__tile--white"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="second-0" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div id="second-1" class="number"> <div class="number__tile number__tile--00"></div> <div class="number__tile number__tile--01"></div> <div class="number__tile number__tile--10"></div> <div class="number__tile number__tile--11"></div> <div class="number__tile number__tile--20"></div> <div class="number__tile number__tile--21"></div> <div class="number__tile number__tile--30"></div> <div class="number__tile number__tile--31"></div> <div class="number__tile number__tile--40"></div> <div class="number__tile number__tile--41"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> <div class="column"> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> <div class="number__tile"></div> </div> </div> <script src="./script.js"></script> </body> </html>
CSS
Copy
html { font-size: 12px; } @media (max-width: 767px) { html { font-size: 2.4vw; } } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; background: #000038; } .clock { position: relative; display: flex; transform: skewX(-16deg); } .row { position: absolute; left: 0.5rem; display: flex; width: 60rem; } .row--top { top: -1.2rem; } .row--bottom { bottom: -1.2rem; } .row .number__tile { background: #12486b; } .column { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 1.2rem; height: 6rem; } .column .number__tile { margin: 0.1rem; background: #12486b; } .column .number__tile--white { background: linear-gradient(#f5fccd, #eb80b1); } .column .number__tile:not(.column .number__tile--white) { transform: translateX(0.5rem); } .number { display: flex; flex-wrap: wrap; width: 2.4rem; height: 6rem; } .number__tile { position: relative; width: 1rem; height: 1rem; margin: 0.1rem; background: linear-gradient(#f5fccd, #eb80b1); border-radius: 10%; transition: transform 0.5s ease; transform-style: preserve-3d; transform-origin: 50% 50% 1rem; } .number__tile:before { content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; background: #12486b; border-radius: 10%; transform: rotate3d(0, 1, 0, 90deg); transform-origin: 100% 50%; } .number--1 .number__tile--00, .number--1 .number__tile--20, .number--1 .number__tile--30, .number--1 .number__tile--02, .number--1 .number__tile--12, .number--1 .number__tile--22, .number--1 .number__tile--32 { transform: rotate3d(0, -1, 0, 90deg); } .number--2 .number__tile--10, .number--2 .number__tile--20, .number--2 .number__tile--31 { transform: rotate3d(0, -1, 0, 90deg); } .number--3 .number__tile--10, .number--3 .number__tile--30 { transform: rotate3d(0, -1, 0, 90deg); } .number--4 .number__tile--00, .number--4 .number__tile--11, .number--4 .number__tile--30, .number--4 .number__tile--40 { transform: rotate3d(0, -1, 0, 90deg); } .number--5 .number__tile--11, .number--5 .number__tile--30, .number--5 .number__tile--42 { transform: rotate3d(0, -1, 0, 90deg); } .number--6 .number__tile--00, .number--6 .number__tile--11 { transform: rotate3d(0, -1, 0, 90deg); } .number--7 .number__tile--10, .number--7 .number__tile--20, .number--7 .number__tile--31, .number--7 .number__tile--41 { transform: rotate3d(0, -1, 0, 90deg); } .number--8 .number__tile--20, .number--8 .number__tile--21 { transform: rotate3d(0, -1, 0, 90deg); } .number--9 .number__tile--30, .number--9 .number__tile--41 { transform: rotate3d(0, -1, 0, 90deg); }
JS
Copy
const hour0 = document.querySelector("#hour-0"); const hour1 = document.querySelector("#hour-1"); const minute0 = document.querySelector("#minute-0"); const minute1 = document.querySelector("#minute-1"); const second0 = document.querySelector("#second-0"); const second1 = document.querySelector("#second-1"); function setNumber(element, number) { element.classList = `number number--${number}`; } function setSection(firstElement, secondElement, number) { const stringNumber = String(number); if (stringNumber.length > 1) { setNumber(firstElement, stringNumber[0]); setNumber(secondElement, stringNumber[1]); } else { setNumber(firstElement, 0); setNumber(secondElement, stringNumber[0]); } } function setClock() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); setSection(hour0, hour1, hours); setSection(minute0, minute1, minutes); setSection(second0, second1, seconds); } setClock(); setInterval(() => { setClock(); }, 500);
