Pixel Perfect CSS Rotation

dabblet.css

/* Pixel Perfect CSS Rotation */
body {
  text-align: center;
}
.clock {
  display: inline-block;
  background: black;
  border-radius: 100%;
  width: 101px;
  height: 101px;
  position: relative;
}
.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 1px;
  background: red;
  transition: all .5s ease;
  transform-origin: left center;
}
.sharp.hand {
  transform-origin: 1.25% 50%; /* 0.5/40*100 */
  /* Set the origin exactly to the center of
     the first pixel from the left */
}
.clock:hover .hand {
  background: white;
  transform: rotateZ(90deg);
}

dabblet.html

<small>Hover clocks to rotate the hand 90 degrees.</small>
<h3>Blurry clock hand</h3>
<div class="clock">
  <div class="hand"> </div>
</div>

<h3>Sharp clock hand</h3>
<div class="clock">
  <div class="sharp hand"> </div>
</div>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}