Pixel Clock

2,098 Andev.web

</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

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);
}

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 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);

Pixel Clock

Recommended