英文:
Why are my div elements not forming a circular clock?
问题
你的CSS代码中，你使用了transform: rotate来旋转每个数字，但这不会创建一个完美的圆形。要使divs形成一个圆，你可以尝试以下方法：
-
使用
border-radius属性将clock容器变成一个圆形：.clock { border: 1px solid red; position: relative; width: 220px; height: 220px; margin: 10px auto; display: flex; flex-direction: row-reverse; justify-content: space-evenly; border-radius: 50%; /* 添加这行 */ } -
确保
clock容器的宽度和高度相等，以便创建一个正圆。
这些更改应该使你的divs形成一个圆形。
英文:
I am trying to build a clock in CSS and I can't get my divs to make a circle. I am using the rotate(30deg) but its is not making a perfect circle.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
: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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
what am I doing wrong here?
I expect my divs to be circle
答案1
得分: 5
旋转发生在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; /* <==== 围绕时钟的中心旋转，而不是元素的中心 */
}
.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>
英文:
Rotation occurs around the transform-origin, which defaults to the center of the element. Each of your divs is being rotated around its own local center.
In this snippet I've added a transform-origin rule to move the center of rotation. That's the only change.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
: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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论