Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .wrapper
  .clocks
    - (1..3).each do |i|
      .number{class: "number_#{i}" }
        - (1..2).each do |j|
          .digit.digit_0
            - (1..24).each do |k|
              .pixel{class: "pixel_#{k}" }
                .clock
                  .hand.hand_minute
                  .hand.hand_hour
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  align-items: center;
  background-color: #fff;
}

.wrapper {
  display: flex;
  width: 100%;
  padding: 10px;
}

.clocks {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 5%;
  grid-row-gap: 0;
}

.number {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.digit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.pixel {
  padding-top: calc(100% - 2px);
  position: relative;
  border: 1px solid transparent;
}

.clock {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px, inset rgba(0, 0, 0, 0.1) 0 2px 2px;
}

.clock:before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #555;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.hand {
  width: 2px;
  background-color: #555;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 500ms ease-in-out;
}

.hand_hour {
  height: 30%;
  transform: translate(-50%, -50%) rotate(60deg) translateY(-50%);
}

.hand_minute {
  height: 40%;
  transform: translate(-50%, -50%) rotate(-60deg) translateY(-50%);
  z-index: 1;
}

.digit_0 .pixel:nth-child(1) .hand_hour,
.digit_0 .pixel:nth-child(6) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(1) .hand_minute,
.digit_0 .pixel:nth-child(6) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(2) .hand_hour,
.digit_0 .pixel:nth-child(3) .hand_hour,
.digit_0 .pixel:nth-child(22) .hand_hour,
.digit_0 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(2) .hand_minute,
.digit_0 .pixel:nth-child(3) .hand_minute,
.digit_0 .pixel:nth-child(22) .hand_minute,
.digit_0 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(4) .hand_hour,
.digit_0 .pixel:nth-child(7) .hand_hour {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(4) .hand_minute,
.digit_0 .pixel:nth-child(7) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(5) .hand_hour,
.digit_0 .pixel:nth-child(8) .hand_hour,
.digit_0 .pixel:nth-child(9) .hand_hour,
.digit_0 .pixel:nth-child(10) .hand_hour,
.digit_0 .pixel:nth-child(11) .hand_hour,
.digit_0 .pixel:nth-child(12) .hand_hour,
.digit_0 .pixel:nth-child(13) .hand_hour,
.digit_0 .pixel:nth-child(14) .hand_hour,
.digit_0 .pixel:nth-child(15) .hand_hour,
.digit_0 .pixel:nth-child(16) .hand_hour,
.digit_0 .pixel:nth-child(17) .hand_hour,
.digit_0 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(5) .hand_minute,
.digit_0 .pixel:nth-child(8) .hand_minute,
.digit_0 .pixel:nth-child(9) .hand_minute,
.digit_0 .pixel:nth-child(10) .hand_minute,
.digit_0 .pixel:nth-child(11) .hand_minute,
.digit_0 .pixel:nth-child(12) .hand_minute,
.digit_0 .pixel:nth-child(13) .hand_minute,
.digit_0 .pixel:nth-child(14) .hand_minute,
.digit_0 .pixel:nth-child(15) .hand_minute,
.digit_0 .pixel:nth-child(16) .hand_minute,
.digit_0 .pixel:nth-child(17) .hand_minute,
.digit_0 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(18) .hand_hour,
.digit_0 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(18) .hand_minute,
.digit_0 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(19) .hand_hour,
.digit_0 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_0 .pixel:nth-child(19) .hand_minute,
.digit_0 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(1) .hand_hour,
.digit_1 .pixel:nth-child(17) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(1) .hand_minute,
.digit_1 .pixel:nth-child(17) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(2) .hand_hour,
.digit_1 .pixel:nth-child(22) .hand_hour,
.digit_1 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(2) .hand_minute,
.digit_1 .pixel:nth-child(22) .hand_minute,
.digit_1 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(3) .hand_hour,
.digit_1 .pixel:nth-child(6) .hand_hour,
.digit_1 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(3) .hand_minute,
.digit_1 .pixel:nth-child(6) .hand_minute,
.digit_1 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(4) .hand_hour,
.digit_1 .pixel:nth-child(8) .hand_hour,
.digit_1 .pixel:nth-child(9) .hand_hour,
.digit_1 .pixel:nth-child(12) .hand_hour,
.digit_1 .pixel:nth-child(13) .hand_hour,
.digit_1 .pixel:nth-child(16) .hand_hour {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(4) .hand_minute,
.digit_1 .pixel:nth-child(8) .hand_minute,
.digit_1 .pixel:nth-child(9) .hand_minute,
.digit_1 .pixel:nth-child(12) .hand_minute,
.digit_1 .pixel:nth-child(13) .hand_minute,
.digit_1 .pixel:nth-child(16) .hand_minute {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(5) .hand_hour,
.digit_1 .pixel:nth-child(19) .hand_hour,
.digit_1 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(5) .hand_minute,
.digit_1 .pixel:nth-child(19) .hand_minute,
.digit_1 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(7) .hand_hour,
.digit_1 .pixel:nth-child(10) .hand_hour,
.digit_1 .pixel:nth-child(11) .hand_hour,
.digit_1 .pixel:nth-child(14) .hand_hour,
.digit_1 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(7) .hand_minute,
.digit_1 .pixel:nth-child(10) .hand_minute,
.digit_1 .pixel:nth-child(11) .hand_minute,
.digit_1 .pixel:nth-child(14) .hand_minute,
.digit_1 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(18) .hand_hour,
.digit_1 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_1 .pixel:nth-child(18) .hand_minute,
.digit_1 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(1) .hand_hour,
.digit_2 .pixel:nth-child(9) .hand_hour,
.digit_2 .pixel:nth-child(14) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(1) .hand_minute,
.digit_2 .pixel:nth-child(9) .hand_minute,
.digit_2 .pixel:nth-child(14) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(2) .hand_hour,
.digit_2 .pixel:nth-child(3) .hand_hour,
.digit_2 .pixel:nth-child(6) .hand_hour,
.digit_2 .pixel:nth-child(10) .hand_hour,
.digit_2 .pixel:nth-child(15) .hand_hour,
.digit_2 .pixel:nth-child(19) .hand_hour,
.digit_2 .pixel:nth-child(22) .hand_hour,
.digit_2 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(2) .hand_minute,
.digit_2 .pixel:nth-child(3) .hand_minute,
.digit_2 .pixel:nth-child(6) .hand_minute,
.digit_2 .pixel:nth-child(10) .hand_minute,
.digit_2 .pixel:nth-child(15) .hand_minute,
.digit_2 .pixel:nth-child(19) .hand_minute,
.digit_2 .pixel:nth-child(22) .hand_minute,
.digit_2 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(4) .hand_hour,
.digit_2 .pixel:nth-child(7) .hand_hour,
.digit_2 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(4) .hand_minute,
.digit_2 .pixel:nth-child(7) .hand_minute,
.digit_2 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(-180deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(5) .hand_hour,
.digit_2 .pixel:nth-child(18) .hand_hour,
.digit_2 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(5) .hand_minute,
.digit_2 .pixel:nth-child(18) .hand_minute,
.digit_2 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(8) .hand_hour,
.digit_2 .pixel:nth-child(12) .hand_hour,
.digit_2 .pixel:nth-child(13) .hand_hour,
.digit_2 .pixel:nth-child(17) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(8) .hand_minute,
.digit_2 .pixel:nth-child(12) .hand_minute,
.digit_2 .pixel:nth-child(13) .hand_minute,
.digit_2 .pixel:nth-child(17) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(11) .hand_hour,
.digit_2 .pixel:nth-child(16) .hand_hour,
.digit_2 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_2 .pixel:nth-child(11) .hand_minute,
.digit_2 .pixel:nth-child(16) .hand_minute,
.digit_2 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(1) .hand_hour,
.digit_3 .pixel:nth-child(10) .hand_hour,
.digit_3 .pixel:nth-child(17) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(1) .hand_minute,
.digit_3 .pixel:nth-child(10) .hand_minute,
.digit_3 .pixel:nth-child(17) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(2) .hand_hour,
.digit_3 .pixel:nth-child(3) .hand_hour,
.digit_3 .pixel:nth-child(6) .hand_hour,
.digit_3 .pixel:nth-child(18) .hand_hour,
.digit_3 .pixel:nth-child(22) .hand_hour,
.digit_3 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(2) .hand_minute,
.digit_3 .pixel:nth-child(3) .hand_minute,
.digit_3 .pixel:nth-child(6) .hand_minute,
.digit_3 .pixel:nth-child(18) .hand_minute,
.digit_3 .pixel:nth-child(22) .hand_minute,
.digit_3 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(4) .hand_hour,
.digit_3 .pixel:nth-child(7) .hand_hour,
.digit_3 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(4) .hand_minute,
.digit_3 .pixel:nth-child(7) .hand_minute,
.digit_3 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(-180deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(5) .hand_hour,
.digit_3 .pixel:nth-child(14) .hand_hour,
.digit_3 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(5) .hand_minute,
.digit_3 .pixel:nth-child(14) .hand_minute,
.digit_3 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(8) .hand_hour,
.digit_3 .pixel:nth-child(12) .hand_hour,
.digit_3 .pixel:nth-child(16) .hand_hour,
.digit_3 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(8) .hand_minute,
.digit_3 .pixel:nth-child(12) .hand_minute,
.digit_3 .pixel:nth-child(16) .hand_minute,
.digit_3 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(11) .hand_hour,
.digit_3 .pixel:nth-child(19) .hand_hour,
.digit_3 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(11) .hand_minute,
.digit_3 .pixel:nth-child(19) .hand_minute,
.digit_3 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(9) .hand_hour,
.digit_3 .pixel:nth-child(13) .hand_hour {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_3 .pixel:nth-child(9) .hand_minute,
.digit_3 .pixel:nth-child(13) .hand_minute {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(1) .hand_hour,
.digit_4 .pixel:nth-child(3) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(1) .hand_minute,
.digit_4 .pixel:nth-child(3) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(2) .hand_hour,
.digit_4 .pixel:nth-child(4) .hand_hour,
.digit_4 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(2) .hand_minute,
.digit_4 .pixel:nth-child(4) .hand_minute,
.digit_4 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(5) .hand_hour,
.digit_4 .pixel:nth-child(6) .hand_hour,
.digit_4 .pixel:nth-child(7) .hand_hour,
.digit_4 .pixel:nth-child(8) .hand_hour,
.digit_4 .pixel:nth-child(9) .hand_hour,
.digit_4 .pixel:nth-child(12) .hand_hour,
.digit_4 .pixel:nth-child(16) .hand_hour,
.digit_4 .pixel:nth-child(19) .hand_hour,
.digit_4 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(5) .hand_minute,
.digit_4 .pixel:nth-child(6) .hand_minute,
.digit_4 .pixel:nth-child(7) .hand_minute,
.digit_4 .pixel:nth-child(8) .hand_minute,
.digit_4 .pixel:nth-child(9) .hand_minute,
.digit_4 .pixel:nth-child(12) .hand_minute,
.digit_4 .pixel:nth-child(16) .hand_minute,
.digit_4 .pixel:nth-child(19) .hand_minute,
.digit_4 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(10) .hand_hour,
.digit_4 .pixel:nth-child(13) .hand_hour,
.digit_4 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(10) .hand_minute,
.digit_4 .pixel:nth-child(13) .hand_minute,
.digit_4 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(11) .hand_hour,
.digit_4 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(11) .hand_minute,
.digit_4 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(14) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(14) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(17) .hand_hour,
.digit_4 .pixel:nth-child(18) .hand_hour,
.digit_4 .pixel:nth-child(21) .hand_hour,
.digit_4 .pixel:nth-child(22) .hand_hour {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_4 .pixel:nth-child(17) .hand_minute,
.digit_4 .pixel:nth-child(18) .hand_minute,
.digit_4 .pixel:nth-child(21) .hand_minute,
.digit_4 .pixel:nth-child(22) .hand_minute {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(1) .hand_hour,
.digit_5 .pixel:nth-child(6) .hand_hour,
.digit_5 .pixel:nth-child(17) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(1) .hand_minute,
.digit_5 .pixel:nth-child(6) .hand_minute,
.digit_5 .pixel:nth-child(17) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(2) .hand_hour,
.digit_5 .pixel:nth-child(3) .hand_hour,
.digit_5 .pixel:nth-child(7) .hand_hour,
.digit_5 .pixel:nth-child(11) .hand_hour,
.digit_5 .pixel:nth-child(14) .hand_hour,
.digit_5 .pixel:nth-child(18) .hand_hour,
.digit_5 .pixel:nth-child(22) .hand_hour,
.digit_5 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(2) .hand_minute,
.digit_5 .pixel:nth-child(3) .hand_minute,
.digit_5 .pixel:nth-child(7) .hand_minute,
.digit_5 .pixel:nth-child(11) .hand_minute,
.digit_5 .pixel:nth-child(14) .hand_minute,
.digit_5 .pixel:nth-child(18) .hand_minute,
.digit_5 .pixel:nth-child(22) .hand_minute,
.digit_5 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(4) .hand_hour,
.digit_5 .pixel:nth-child(12) .hand_hour,
.digit_5 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(4) .hand_minute,
.digit_5 .pixel:nth-child(12) .hand_minute,
.digit_5 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(5) .hand_hour,
.digit_5 .pixel:nth-child(9) .hand_hour,
.digit_5 .pixel:nth-child(16) .hand_hour,
.digit_5 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(5) .hand_minute,
.digit_5 .pixel:nth-child(9) .hand_minute,
.digit_5 .pixel:nth-child(16) .hand_minute,
.digit_5 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(8) .hand_hour,
.digit_5 .pixel:nth-child(19) .hand_hour,
.digit_5 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(8) .hand_minute,
.digit_5 .pixel:nth-child(19) .hand_minute,
.digit_5 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(10) .hand_hour,
.digit_5 .pixel:nth-child(13) .hand_hour,
.digit_5 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_5 .pixel:nth-child(10) .hand_minute,
.digit_5 .pixel:nth-child(13) .hand_minute,
.digit_5 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(1) .hand_hour,
.digit_6 .pixel:nth-child(6) .hand_hour,
.digit_6 .pixel:nth-child(14) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(1) .hand_minute,
.digit_6 .pixel:nth-child(6) .hand_minute,
.digit_6 .pixel:nth-child(14) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(2) .hand_hour,
.digit_6 .pixel:nth-child(3) .hand_hour,
.digit_6 .pixel:nth-child(7) .hand_hour,
.digit_6 .pixel:nth-child(11) .hand_hour,
.digit_6 .pixel:nth-child(22) .hand_hour,
.digit_6 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(2) .hand_minute,
.digit_6 .pixel:nth-child(3) .hand_minute,
.digit_6 .pixel:nth-child(7) .hand_minute,
.digit_6 .pixel:nth-child(11) .hand_minute,
.digit_6 .pixel:nth-child(22) .hand_minute,
.digit_6 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(4) .hand_hour,
.digit_6 .pixel:nth-child(12) .hand_hour,
.digit_6 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(4) .hand_minute,
.digit_6 .pixel:nth-child(12) .hand_minute,
.digit_6 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(5) .hand_hour,
.digit_6 .pixel:nth-child(9) .hand_hour,
.digit_6 .pixel:nth-child(13) .hand_hour,
.digit_6 .pixel:nth-child(16) .hand_hour,
.digit_6 .pixel:nth-child(17) .hand_hour,
.digit_6 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(5) .hand_minute,
.digit_6 .pixel:nth-child(9) .hand_minute,
.digit_6 .pixel:nth-child(13) .hand_minute,
.digit_6 .pixel:nth-child(16) .hand_minute,
.digit_6 .pixel:nth-child(17) .hand_minute,
.digit_6 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(10) .hand_hour,
.digit_6 .pixel:nth-child(18) .hand_hour,
.digit_6 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(10) .hand_minute,
.digit_6 .pixel:nth-child(18) .hand_minute,
.digit_6 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(8) .hand_hour,
.digit_6 .pixel:nth-child(19) .hand_hour,
.digit_6 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_6 .pixel:nth-child(8) .hand_minute,
.digit_6 .pixel:nth-child(19) .hand_minute,
.digit_6 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(1) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(1) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(2) .hand_hour,
.digit_7 .pixel:nth-child(3) .hand_hour,
.digit_7 .pixel:nth-child(6) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(2) .hand_minute,
.digit_7 .pixel:nth-child(3) .hand_minute,
.digit_7 .pixel:nth-child(6) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(4) .hand_hour,
.digit_7 .pixel:nth-child(7) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(4) .hand_minute,
.digit_7 .pixel:nth-child(7) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(5) .hand_hour,
.digit_7 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(5) .hand_minute,
.digit_7 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(8) .hand_hour,
.digit_7 .pixel:nth-child(11) .hand_hour,
.digit_7 .pixel:nth-child(12) .hand_hour,
.digit_7 .pixel:nth-child(15) .hand_hour,
.digit_7 .pixel:nth-child(16) .hand_hour,
.digit_7 .pixel:nth-child(19) .hand_hour,
.digit_7 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(8) .hand_minute,
.digit_7 .pixel:nth-child(11) .hand_minute,
.digit_7 .pixel:nth-child(12) .hand_minute,
.digit_7 .pixel:nth-child(15) .hand_minute,
.digit_7 .pixel:nth-child(16) .hand_minute,
.digit_7 .pixel:nth-child(19) .hand_minute,
.digit_7 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(9) .hand_hour,
.digit_7 .pixel:nth-child(10) .hand_hour,
.digit_7 .pixel:nth-child(13) .hand_hour,
.digit_7 .pixel:nth-child(14) .hand_hour,
.digit_7 .pixel:nth-child(17) .hand_hour,
.digit_7 .pixel:nth-child(18) .hand_hour,
.digit_7 .pixel:nth-child(21) .hand_hour,
.digit_7 .pixel:nth-child(22) .hand_hour {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_7 .pixel:nth-child(9) .hand_minute,
.digit_7 .pixel:nth-child(10) .hand_minute,
.digit_7 .pixel:nth-child(13) .hand_minute,
.digit_7 .pixel:nth-child(14) .hand_minute,
.digit_7 .pixel:nth-child(17) .hand_minute,
.digit_7 .pixel:nth-child(18) .hand_minute,
.digit_7 .pixel:nth-child(21) .hand_minute,
.digit_7 .pixel:nth-child(22) .hand_minute {
  transform: translate(-50%, -50%) rotate(-135deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(1) .hand_hour,
.digit_8 .pixel:nth-child(6) .hand_hour,
.digit_8 .pixel:nth-child(14) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(1) .hand_minute,
.digit_8 .pixel:nth-child(6) .hand_minute,
.digit_8 .pixel:nth-child(14) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(2) .hand_hour,
.digit_8 .pixel:nth-child(3) .hand_hour,
.digit_8 .pixel:nth-child(22) .hand_hour,
.digit_8 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(2) .hand_minute,
.digit_8 .pixel:nth-child(3) .hand_minute,
.digit_8 .pixel:nth-child(22) .hand_minute,
.digit_8 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(4) .hand_hour,
.digit_8 .pixel:nth-child(7) .hand_hour,
.digit_8 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(4) .hand_minute,
.digit_8 .pixel:nth-child(7) .hand_minute,
.digit_8 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(5) .hand_hour,
.digit_8 .pixel:nth-child(8) .hand_hour,
.digit_8 .pixel:nth-child(9) .hand_hour,
.digit_8 .pixel:nth-child(12) .hand_hour,
.digit_8 .pixel:nth-child(13) .hand_hour,
.digit_8 .pixel:nth-child(16) .hand_hour,
.digit_8 .pixel:nth-child(17) .hand_hour,
.digit_8 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(5) .hand_minute,
.digit_8 .pixel:nth-child(8) .hand_minute,
.digit_8 .pixel:nth-child(9) .hand_minute,
.digit_8 .pixel:nth-child(12) .hand_minute,
.digit_8 .pixel:nth-child(13) .hand_minute,
.digit_8 .pixel:nth-child(16) .hand_minute,
.digit_8 .pixel:nth-child(17) .hand_minute,
.digit_8 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(10) .hand_hour,
.digit_8 .pixel:nth-child(18) .hand_hour,
.digit_8 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(10) .hand_minute,
.digit_8 .pixel:nth-child(18) .hand_minute,
.digit_8 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(11) .hand_hour,
.digit_8 .pixel:nth-child(19) .hand_hour,
.digit_8 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_8 .pixel:nth-child(11) .hand_minute,
.digit_8 .pixel:nth-child(19) .hand_minute,
.digit_8 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(1) .hand_hour,
.digit_9 .pixel:nth-child(6) .hand_hour,
.digit_9 .pixel:nth-child(17) .hand_hour {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(1) .hand_minute,
.digit_9 .pixel:nth-child(6) .hand_minute,
.digit_9 .pixel:nth-child(17) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(2) .hand_hour,
.digit_9 .pixel:nth-child(3) .hand_hour,
.digit_9 .pixel:nth-child(14) .hand_hour,
.digit_9 .pixel:nth-child(18) .hand_hour,
.digit_9 .pixel:nth-child(22) .hand_hour,
.digit_9 .pixel:nth-child(23) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(2) .hand_minute,
.digit_9 .pixel:nth-child(3) .hand_minute,
.digit_9 .pixel:nth-child(14) .hand_minute,
.digit_9 .pixel:nth-child(18) .hand_minute,
.digit_9 .pixel:nth-child(22) .hand_minute,
.digit_9 .pixel:nth-child(23) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(4) .hand_hour,
.digit_9 .pixel:nth-child(7) .hand_hour,
.digit_9 .pixel:nth-child(15) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(4) .hand_minute,
.digit_9 .pixel:nth-child(7) .hand_minute,
.digit_9 .pixel:nth-child(15) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(5) .hand_hour,
.digit_9 .pixel:nth-child(8) .hand_hour,
.digit_9 .pixel:nth-child(9) .hand_hour,
.digit_9 .pixel:nth-child(12) .hand_hour,
.digit_9 .pixel:nth-child(16) .hand_hour,
.digit_9 .pixel:nth-child(20) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(5) .hand_minute,
.digit_9 .pixel:nth-child(8) .hand_minute,
.digit_9 .pixel:nth-child(9) .hand_minute,
.digit_9 .pixel:nth-child(12) .hand_minute,
.digit_9 .pixel:nth-child(16) .hand_minute,
.digit_9 .pixel:nth-child(20) .hand_minute {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(10) .hand_hour,
.digit_9 .pixel:nth-child(13) .hand_hour,
.digit_9 .pixel:nth-child(21) .hand_hour {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(10) .hand_minute,
.digit_9 .pixel:nth-child(13) .hand_minute,
.digit_9 .pixel:nth-child(21) .hand_minute {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(11) .hand_hour,
.digit_9 .pixel:nth-child(19) .hand_hour,
.digit_9 .pixel:nth-child(24) .hand_hour {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-50%);
}
.digit_9 .pixel:nth-child(11) .hand_minute,
.digit_9 .pixel:nth-child(19) .hand_minute,
.digit_9 .pixel:nth-child(24) .hand_minute {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-50%);
}

              
            
!

JS

              
                let digit = document.getElementsByClassName('digit');

function setTime() {
    time_numbers = ((new Date()).toTimeString().substr(0,8)).split(':').join('');

    for (let i = 0; i < time_numbers.length; i++) {
        digit[i].className = 'digit digit_' + time_numbers.charAt(i);
    }
};

setTime();
setInterval(setTime, 1000);

              
            
!
999px

Console