Как изменить текстовую ориентацию букв в на вертикальное или нормальное? ⇐ Html

[Anonymous]

Парапев над или номера должны показывать буквы внутри in upright Orientation . Но по какой -то причине это не происходит (за исключением «1», и в этом случае по умолчанию ориентация вертикаль). Я также спросил CHATGPT об этом, ничего не помогло. наклонены. Но все сосредоточено. Я хочу вернуть эти буквы. < /P>

Код: Выделить всё

let menuItems = document.querySelectorAll(".menu-item");
let itemCount = menuItems.length;
let radius = 100;

menuItems.forEach((item, index) => {
let angle = (index / itemCount) * (2 * Math.PI);
let x = radius * Math.cos(angle);
let y = radius * Math.sin(angle);
item.style.left = `calc(50% + ${x}px)`;
item.style.top = `calc(50% + ${y}px)`;
item.style.transform = `translate(-50%, -50%) rotate(${angle}rad)`;

let text = item.querySelector("span");
if (text) {
text.style.transform = `rotate(${-angle}rad)`;
text.style.display = "inline-block";
}
});

document.querySelectorAll(".submenu").forEach((submenu) => {
let buttons = submenu.querySelectorAll("button");
let btnCount = buttons.length;
let btnRadius = 60;

buttons.forEach((btn, i) =>  {
let angle = (i / btnCount) * (2 * Math.PI);
let x = btnRadius * Math.cos(angle);
let y = btnRadius * Math.sin(angle);
btn.style.left = `calc(50% + ${x}px)`;
btn.style.top = `calc(50% + ${y}px)`;
btn.style.setProperty("--angle", `${angle}rad`);
btn.style.transform = `translate(-50%, -50%) rotate(${angle}rad)`;

let text = btn.querySelector("span");
if (text) {
text.style.transform = `rotate(${-angle}rad)`;
text.style.display = "inline-block";
}
});
});< /code>
body {
background: linear-gradient(135deg, #1e1e2f, #292940);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "Segoe UI", sans-serif;
}

.menu-center {
position: relative;
width: 220px;
height: 220px;
}

.central-button {
position: absolute;
width: 90px;
height: 90px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 50%;
color: white;
font-weight: bold;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
z-index: 2;
transition: transform 0.3s ease;
}

.central-button:hover {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
}

.menu-item {
position: absolute;
width: 20px;
height: 20px;
top: 40%;
left: 40%;
background: linear-gradient(135deg, #f39c12, #e67e22);
transform-origin: center center;
border-radius: 50%;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
}

.menu-label,
button span {
display: inline-block;
transform-origin: center;
}

.menu-item span {
display: inline-block;
transform-origin: center center;
position: absolute;
white-space: nowrap;
}

.submenu button span {
display: inline-block;
transform-origin: center;
position: absolute;
white-space: nowrap;
}

.menu-center:hover .menu-item {
opacity: 1;
pointer-events: auto;
}

.menu-center:hover .menu-item:nth-child(2) {
transition-delay: 0s;
}

.menu-center:hover .menu-item:nth-child(3) {
transition-delay: 0.1s;
}

.menu-center:hover .menu-item:nth-child(4) {
transition-delay: 0.2s;
}

.menu-center:hover .menu-item:nth-child(5) {
transition-delay: 0.3s;
}

.menu-center:hover .menu-item:nth-child(6) {
transition-delay: 0.4s;
}

.menu-center:hover .menu-item:nth-child(7) {
transition-delay: 0.5s;
}

.menu-center:hover .menu-item:nth-child(8) {
transition-delay: 0.6s;
}

.menu-center:hover .menu-item:nth-child(9) {
transition-delay: 0.7s;
}

.menu-item:hover {
transform: scale(1.15);
box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);
z-index: 1;
}

.submenu {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}

.menu-item:hover .submenu button {
opacity: 1;
pointer-events: auto;
}

.menu-item:hover .submenu button:nth-child(1) {
transition-delay: 0s;
}

.menu-item:hover .submenu button:nth-child(2) {
transition-delay: 0.1s;
}

.menu-item:hover .submenu button:nth-child(3) {
transition-delay: 0.2s;
}

.menu-item:hover .submenu button:nth-child(4) {
transition-delay: 0.3s;
}

.menu-item:hover .submenu button:nth-child(5) {
transition-delay: 0.4s;
}

.menu-item:hover .submenu button:nth-child(6) {
transition-delay: 0.5s;
}

.menu-item:hover .submenu button:nth-child(7) {
transition-delay: 0.6s;
}

.menu-item:hover .submenu button:nth-child(8) {
transition-delay: 0.7s;
}

.submenu button {
position: absolute;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #2ecc71, #27ae60);
top: 45%;
left: 45%;
transform-origin:  center;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 10px;
font-weight: bold;
opacity: 0;
transition: all 0.4s ease;
transition-delay: 0s;
opacity: 0;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.submenu button:hover {
transform: translate(-50%, -50%) rotate(var(--angle, 0rad)) scale(1.2);
box-shadow: 0 0 12px rgba(46, 204, 113, 0.9);
}

.button {
display: flex;
justify-content: center;
align-items:  center;
}< /code>





     & l t ; t i t l e & g t ; R a d i a l   M e n u & l t ; / t i t l e & g t ; < b r   / >     & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " s t y l e . c s s "   / & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; d i v   c l a s s = " m e n u - c e n t e r " & g t ; < b r   / >         & l t ; d i v   c l a s s = " c e n t r a l - b u t t o n " & g t ; M e n u & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " m e n u - i t e m " & g t ; < b r   / >             & l t ; s p a n   c l a s s = " m e n u - l a b e l " & g t ; 1 & l t ; / s p a n & g t ; < b r   / >             & l t ; d i v   c l a s s = " s u b m e n u " & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; A & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; B & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; C & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; D & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; E & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; F & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; G & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; H & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " m e n u - i t e m " & g t ; < b r   / >             & l t ; s p a n   c l a s s = " m e n u - l a b e l " & g t ; 2 & l t ; / s p a n & g t ; < b r   / >             & l t ; d i v   c l a s s = " s u b m e n u " & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; A & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b u t t o n & g t ; & l t ; s p a n & g t ; B & l t ; / s p a n & g t ; & l t ; / b u t t o n & g t ; < b r   / >                 & l t ; b utton>C
D
E
F
G
H



3

A
B
C
D
E
F
G
H



4

A
B
C
D
E
F
G
H



5

A
B
C
D
E
F
G
H



6

A
B
C
D
E
F
G
H



7

A
B
C
D
E
F
G
H



8

A
B
C
D
E
F
G
H

Подробнее здесь: https://stackoverflow.com/questions/796 ... -upright-o