CSS：创建具有边界半径的时钟

Question

我决定尝试创建具有一些基本CSS属性的模拟12小时时钟。 我首先创建一个500px的正方形div。 然后，将border-radius设置为250px，并得到一个漂亮的圆圈。 在此之后，我添加了十二个刻度线，将它们放置在绝对位置，并获得了它们对应的位置。

每个刻度线的角度都基于此（为简单算术而道歉）：

12个刻度
360度旋转
360/12 = 30°角度

可以使用一些基本的三角函数来计算每个刻度线的位置。 我知道θ（0°，30°，60°等）和半径（250），并且通过使用cos和sin ，我可以找出相关的上，下，左和右值。 要获得左值或右值（x），我可以简单地使用： r * sin θ 。 要获得最高或最低值（y），我可以使用： r - (r * cos θ) 。 希望下面的图片（对MS Paint缺乏技巧）可以帮助清除我正在尝试做的事情。

一旦有了这些方程式，就可以轻松获得相应的x和y值：

    θ (angle)   |  250 * sin θ [x]  | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
   30° (1:00)   |   right: 125px    |      top: 33.5px
   60° (2:00)   |   right: 33.5px   |      top: 125px
   90° (3:00)   |   right: 0px      |      top: 250px
  120° (4:00)   |   right: 33.5px   |      bottom: 125px
  150° (5:00)   |   right: 125px    |      bottom: 33.5px
  180° (6:00)   |   right: 250px    |      bottom: 0px
  210° (7:00)   |   left: 125px     |      bottom: 33.5px
  240° (8:00)   |   left: 33.5px    |      bottom: 125px
  270° (9:00)   |   left: 0px       |      bottom: 250px
  300° (10:00)  |   left: 33.5px    |      top: 125px
  330° (11:00)  |   left: 125px     |      top: 33.5px
  360° (12:00)  |   left: 250px     |      top: 0px

现在，我将问题拖了太长时间了……我的问题是，为什么我的2、3、4、8、9和10的刻度线会有点偏离？ 根据我的计算（我一直想这么说），我不应该遇到这些问题。 当然，我进行了一些四舍五入，并保留了一些无花果，但是它们对定位显得不那么重要。 这是我的代码：

HTML

<body>
    <div id="clock">
        <div id="one" class="oneEleven tick"></div>
        <div id="two" class="twoTen tick"></div>
        <div id="three" class="threeNine tick"></div>
        <div id="four" class="fourEight tick"></div>
        <div id="five" class="fiveSeven tick"></div>
        <div id="six" class="sixTwelve tick"></div>
        <div id="seven" class="fiveSeven tick"></div>
        <div id="eight" class="fourEight tick"></div>
        <div id="nine" class="threeNine tick"></div>
        <div id="ten" class="twoTen tick"></div>
        <div id="eleven" class="oneEleven tick"></div>
        <div id="twelve" class="sixTwelve tick"></div>
    </div>
</body>

CSS

#clock {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  border: 1px solid black;
  position: relative;
}

.tick {
  background-color: black;
  height: 20px;
  width: 5px;
  position: absolute;
}

.oneEleven {
  /* ~6.7% */
  top: 33.5px;
}

.twoTen {
  /* 25% */
  top: 125px;
}

.threeNine {
  /* 50% */
  top: 250px;
}

.fourEight {
  /* 25% */
  bottom: 125px;
}

.fiveSeven {
  /* ~6.7% */
  bottom: 33.5px;
}

#one {
  right: 125px;
  transform: rotate(30deg);
}

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
}

#three {
  right: 0px;
  transform: rotate(90deg);
}

#four {
  right: 33.5px;
  transform: rotate(120deg);
}

#five {
  right: 125px;
  transform: rotate(150deg);
}

#six {
  left: 250px;
  bottom: 0px;
}

#seven {
  left: 125px;
  transform: rotate(-150deg);
}

#eight {
  left: 33.5px;
  transform: rotate(-120deg);
}

#nine {
  left: 0px;
  transform: rotate(-90deg);
}

#ten {
  left: 33.5px;
  transform: rotate(-60deg);
}

#eleven {
  left: 125px;
  transform: rotate(-30deg);
}

#twelve {
  left: 250px;
  top: 0px;
}

jsFiddle 。 乍一看，这并不完全明显，但是如果您看一下我所引用的刻度线，您会发现它们并没有排成一圈。 我最终将要使用百分比，但是我想知道为什么不使用百分比，这是创建想要添加样式的圆的最佳方法吗？ 我意识到这里有HTML5 canvas标签，但是我觉得那太难处理了，并且会执行比我需要执行的处理更多的处理...

任何帮助，将不胜感激！

Answer 1

看起来您已经定位了每个刻度，以便在圆上的正确位置获得一个角。 但是之后，刻度线围绕原点旋转，从而将其一部分推到了圆的外面。 您应该能够通过为每个刻度线适当设置transform-origin来修复它。 您需要围绕定位的同一角旋转。 因此，如果您在顶部和右侧位置放置，请将transform-origin设置为“ top right”。 例如：

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
  transform-origin: top right;
}

CSS：创建具有边界半径的时钟

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-04-29 15:34:40

CSS：创建具有边界半径的时钟

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-04-29 15:34:40

解决方案1
2 已采纳 2013-04-29 15:34:40