Html 如何在CSS中旋转div中的文本以使数字看起来正确（我已经旋转了div本身，只是希望数字旋转））
我在做这个钟，想找人帮忙。因此，当我将数字旋转360度时，数字不会向上显示，可能有些是向上显示，但有些数字（如6和7）看起来是颠倒的 下面是结果的图像。我还包括了HTML和CSS代码。如果您对我的代码有任何疑问，请告诉我Html 如何在CSS中旋转div中的文本以使数字看起来正确（我已经旋转了div本身，只是希望数字旋转））,html,css,Html,Css,我在做这个钟，想找人帮忙。因此，当我将数字旋转360度时，数字不会向上显示，可能有些是向上显示，但有些数字（如6和7）看起来是颠倒的 下面是结果的图像。我还包括了HTML和CSS代码。如果您对我的代码有任何疑问，请告诉我 #html this is my HTML file <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
#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);}
#html
这是我的HTML文件
艾哈迈德钟
.
.
.
.
.
.
.
.
.
.
1.
2.
12
**#css**
*{边距：0；填充：0；框大小：边框框；}
正文{
显示器：flex；
证明内容：中心；
宽度：100%
}
.钟{
显示器：flex；
证明内容：中心；
宽度：490px；
高度：490px；
边框：10px实心#76AA9E；
边界半径：50%；
利润率：180px自动20px自动；
文本对齐：居中；
}
.数字{
位置：绝对位置；
宽度：100px；
身高：463px；
字号：1.5em；
字体大小：粗体；
}
.圆点{
文本对齐：居中；
宽度：100px；
高度：460px；
位置：绝对位置；
}
dot1{变换：旋转（6度）；}
.dot2{变换：旋转（12度）；}
.dot3{变换：旋转（18度）；}
.dot4{变换：旋转（24度）；}
.dot5{变换：旋转（30度）；}
/*数字*/
.no1{变换：旋转（30度）；}
.no2{变换：旋转（60度）；}
对于要翻转的数字（可能是4-8），可以将数字作为原始旋转div的子元素放入元素中，然后旋转该子元素。我在下面举了一个例子，你可以试试 HTML:
对于要翻转的数字（可能是4-8），可以将数字作为原始旋转div的子元素放入元素中，然后旋转该子元素。我在下面举了一个例子，你可以试试 HTML:
@特伦顿·麦金尼感谢你组织我的问题。我真的很感激。非常感谢你的回答。这很有效@Brice@Trenton谢谢你组织我的问题。我真的很感激。非常感谢你的回答。这很有效@布里斯
<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>
.no4 { transform: rotate(120deg);}
.no5 { transform: rotate(150deg);}
.no6 { transform: rotate(180deg);}
.no7 { transform: rotate(210deg);}
.no8 { transform: rotate(240deg);}
.flipNumber { transform: rotate(180deg);}