我正在制作这个时钟，需要一些帮助。所以当我将数字旋转 360 度时，数字可能不会正确显示，但有些数字(如 6 和 7)看起来是颠倒的。
下面是结果的图像。我还在顶部包含了 HTML 和 CSS 代码。如果您对我的代码有任何疑问，请告诉我。
#html
this is my HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ahmed's Clock</title>
<link rel="stylesheet" href="clock.css">
<body>
<div class="clock">
<!-- the clock hands -->
<div class="hourhand"></div>
<div class="minhand"></div>
<div class="sechand"></div>
<!-- the litte dots between each number-->
<div class="dots dot1">.</div>
<div class="dots dot2">.</div>
<div class="dots dot3">.</div>
<div class="dots dot4">.</div>
<div class="dots dot5">.</div>
<div class="dots dot6">.</div>
<div class="dots dot7">.</div>
<div class="dots dot8">.</div>
<div class="dots dot9">.</div>
<div class="dots dot10">.</div>
<!-- the 12 numbers of the clock-->
<div class="numbers no1">1</div>
<div class="numbers no2">2</div>
<div class="numbers no12">12</div>
</div>
<!-- the javascript file used in this project -->
<script src="clock.js"></script>
</body>
</html>
**#css**
* { margin: 0; padding: 0; box-sizing: border-box;}
body {
display: flex;
justify-content:center;
width: 100%
}
.clock {
display: flex;
justify-content: center;
width: 490px;
height: 490px;
border: 10px solid #76AA9E;
border-radius: 50%;
margin: 180px auto 20px auto;
text-align: center;
}
.numbers {
position: absolute;
width: 100px;
height: 463px;
font-size: 1.5em;
font-weight: bold;
}
.dots {
text-align: center;
width: 100px;
height: 460px;
position: absolute;
}
dot1 { transform: rotate(6deg);}
.dot2 { transform: rotate(12deg);}
.dot3 { transform: rotate(18deg);}
.dot4 { transform: rotate(24deg);}
.dot5 { transform: rotate(30deg);}
/* the numbers */
.no1 { transform: rotate(30deg);}
.no2 { transform: rotate(60deg);}
最佳答案
对于您想要翻转的数字(可能是 4-8)，您可以将数字放在一个元素中作为最初旋转的 div 的子元素，然后旋转该子元素。我在下面举了一个例子，你可以试试。
HTML:
<div class="numbers no4">
<p class="flipNumber">4</p>
</div>
<div class="numbers no5">
<p class="flipNumber">5</p>
</div>
<div class="numbers no6">
<p class="flipNumber">6</p>
</div>
<div class="numbers no7">
<p class="flipNumber">7</p>
</div>
<div class="numbers no8">
<p class="flipNumber">8</p>
</div>
CSS:
.no4 { transform: rotate(120deg);}
.no5 { transform: rotate(150deg);}
.no6 { transform: rotate(180deg);}
.no7 { transform: rotate(210deg);}
.no8 { transform: rotate(240deg);}
.flipNumber { transform: rotate(180deg);}
关于html - 如何在 CSS 中旋转 div 中的文本以使我的数字看起来正确(我已经旋转了 div 本身只是想让数字旋转))，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58478371/