How can I reflect contents downwards

Question

I'm working on my website which I have contents(clock) and I want to reflect it downward somehow like mirror I don't if it is possible but I guess it is.

I'm using chrome browser but will better if the solution is cross browsers and the following is my code

let hours = document.getElementById('hour');
let minutes = document.getElementById('minutes');
let seconds = document.getElementById('seconds');

function clock() {
  let t = new Date();
  let h = t.getHours();
  let m = t.getMinutes();
  let s = t.getSeconds();
  hours.innerHTML = h;
  minutes.innerHTML = m;
  seconds.innerHTML = s;
}
setInterval(clock, 1000);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #060a1f;
}

#clock h2 {
  position: relative;
  display: block;
  color: #fff;
  text-align: center;
  margin: 10px 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.8em;
}

#clock #time {
  display: flex;
}

#clock #time div {
  position: relative;
  margin: 0 5px;
}

#clock #time div span {
  position: relative;
  display: block;
  width: 150px;
  height: 250px;
  background: #2196f3;
  color: #fff;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

#clock #time div span:nth-child(1) {
  height: 70px;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  font-weight: 900;
  z-index: 9;
  box-shadow: none;
  background: #127fd6;
  text-transform: uppercase;
}

#clock #time div span:nth-child(2) {
  height: 30px;
  font-size: 1em;
  letter-spacing: 0.2em;
  font-weight: 900;
  z-index: 9;
  box-shadow: none;
  background: #127fd6;
  text-transform: uppercase;
}

#clock #time div:last-child span {
  background: #ff006a;
}

#clock #time div:last-child span:nth-child(2) {
  background: #ec0062;
}

<div id="clock">
  <h2>The time is now</h2>
  <div id="time">
    <div>
      <span id="hour">00</span>
      <span>Hours</span>
    </div>
    <div>
      <span id="minutes">00</span>
      <span>Minutes</span>
    </div>
    <div>
      <span id="seconds">00</span>
      <span>Seconds</span>
    </div>
  </div>
</div>

An expected result looks like this:

you need to start by duplicating the content then play with some transformation/opacity/masking — Temani Afif, Jul 13 '20 at 22:06
This is called a ‘wet floor effect’ and was popular around mid 00s. — Roy, Jul 13 '20 at 22:10
no, this is your only way. In the future you will be able to use this: https://developer.mozilla.org/en-US/docs/Web/CSS/element but not before 1 year at least (you can test in Firefox actually) — Temani Afif, Jul 13 '20 at 22:11
@Roy how can I apply "‘wet floor effect", is there any documentation about it? — Umutambyi Gad, Jul 13 '20 at 22:12
I tried this out with your code, it should help: https://www.codesdope.com/blog/article/add-impressive-reflection-effects-using-only-css/ — CYr, Jul 13 '20 at 22:23

How can I reflect contents downwards

0 Answers0