为什么我的 div 元素没有形成圆形时钟？

Question

我正在尝试用 CSS 构建一个时钟，但无法让我的 div 形成一个圆圈。我正在使用，rotate(30deg)但它并没有形成一个完美的圆圈。

:root {
  --rot: 30deg;
  background-color: darkgray;
}

.container {
  border: 1px solid black;
}

.clock {
  border: 1px solid red;
  position: relative;
  width: 220px;
  height: 220px;
  margin: 10px auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
}

.clock div {
  display: flex;
  position: absolute;
}

.h-1 {
  transform: rotate(var(--rot))
}

.h-2 {
  transform: rotate(calc(2 * var(--rot)))
}

.h-3 {
  transform: rotate(calc(3 * var(--rot)));
}

.h-4 {
  transform: rotate(calc(4 * var(--rot)));
}

.h-5 {
  transform: rotate(calc(5 * var(--rot)));
}

.h-6 {
  transform: rotate(calc(6 * var(--rot)));
}

.h-7 {
  transform: rotate(calc(7 * var(--rot)));
}

.h-8 {
  transform: rotate(calc(8 * var(--rot)));
}

.h-9 {
  transform: rotate(calc(9 * var(--rot)));
}

.h-10 {
  transform: rotate(calc(10 * var(--rot)));
}

.h-11 {
  transform: rotate(calc(11 * var(--rot)));
}

.h-12 {
  display: block;
}

<div class="container">
  <div class="clock">
    <div class="h-12">12</div>
    <div class="h-1">1</div>
    <div class="h-2">2</div>
    <div class="h-3">3</div>
    <div class="h-4">4</div>
    <div class="h-5">5</div>
    <div class="h-6">6</div>
    <div class="h-7">7</div>
    <div class="h-8">8</div>
    <div class="h-9">9</div>
    <div class="h-10">10</div>
    <div class="h-11">11</div>
  </div>
</div>

我在这里做错了什么？

我希望我的 div 是圆形的

Answer 1

旋转发生在transform-origin周围，默认为元素的中心。您的每个 div 都围绕其自己的本地中心旋转。

在此代码片段中，我添加了一条transform-origin移动旋转中心的规则。这是唯一的改变。

:root {
  --rot: 30deg;
  background-color: darkgray;
}

.container {
  border: 1px solid black;
}

.clock {
  border: 1px solid red;
  position: relative;
  width: 220px;
  height: 220px;
  margin: 10px auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
}

.clock div {
  display: flex;
  position: absolute;
  transform-origin: 0 110px; /* <==== rotate around the center of the clock, not the center of the element */
}

.h-1 {
  transform: rotate(var(--rot))
}

.h-2 {
  transform: rotate(calc(2 * var(--rot)))
}

.h-3 {
  transform: rotate(calc(3 * var(--rot)));
}

.h-4 {
  transform: rotate(calc(4 * var(--rot)));
}

.h-5 {
  transform: rotate(calc(5 * var(--rot)));
}

.h-6 {
  transform: rotate(calc(6 * var(--rot)));
}

.h-7 {
  transform: rotate(calc(7 * var(--rot)));
}

.h-8 {
  transform: rotate(calc(8 * var(--rot)));
}

.h-9 {
  transform: rotate(calc(9 * var(--rot)));
}

.h-10 {
  transform: rotate(calc(10 * var(--rot)));
}

.h-11 {
  transform: rotate(calc(11 * var(--rot)));
}

.h-12 {
  display: block;
}

<div class="container">
  <div class="clock">
    <div class="h-12">12</div>
    <div class="h-1">1</div>
    <div class="h-2">2</div>
    <div class="h-3">3</div>
    <div class="h-4">4</div>
    <div class="h-5">5</div>
    <div class="h-6">6</div>
    <div class="h-7">7</div>
    <div class="h-8">8</div>
    <div class="h-9">9</div>
    <div class="h-10">10</div>
    <div class="h-11">11</div>
  </div>
</div>