无论元素旋转如何，都要使文本面朝上

Question

这是我的形象

在上图中，我旋转橙色nav，但我不希望其中的文字旋转。我希望它正确面对。

以下是我当前的代码

$('div nav').each(function() {
  index = $(this).index();
  deg = index * 30;
  $(this).css({
    transform: 'rotate(' + deg + 'deg)'
  })
})

.clock {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 20px;
  box-shadow: 0px 0px 4px #a8a8a8;
  border-radius: 50%;
}

.point {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%) !important;
}

.point:before {
  content: "•";
}

.clock nav {
  position: absolute;
  width: 100%;
  height: 15px;
  background: #f90;
  margin-top: -7px;
  top: 50%;
  transform-origin: center;
  line-height: 15px;
  color: #fff;
}

._1st {
  position: absolute;
  left: 5px;
}

._2nd {
  position: absolute;
  left: 15px;
}

._3rd {
  position: absolute;
  right: 15px;
}

._4th {
  position: absolute;
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
  <span class="point"></span>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
  <nav><span class="_1st">0</span><span class="_2nd">0</span><span class="_3rd">0</span><span class="_4th">0</span></nav>
</div>