CSS вращающийся куб - как постоянно отображать текст прямо вверх? [закрыто] ⇐ CSS

[Anonymous]

У меня есть этот CSS, случайным образом ретигирующий куб.let el = null;
let wrapper = null;
let currentX = 0;
let currentY = 0;
let rorateX = 0;
let rotateY = 0;
let opened = false;

function Cube(selector) {
el = document.querySelector(element);
_initData();
_initEvents();
}

function _initData() {
wrapper = el.parentNode;
el.style.transform = 'translate3d(0, 0, 0) rotateX(-200deg) rotateY(45deg)'
}

function _initEvents() {
el.addEventListener('mousedown', (event) => {
event.preventDefault();
currentX = event.clientX;
currentY = event.clientY;
rotateX = Number(el.style.transform.match(/rotateX\((-?[0-9]+(\.[0-9])?)*deg\)/)[1]);
rotateY = Number(el.style.transform.match(/rotateY\((-?[0-9]+(\.[0-9])?)*deg\)/)[1]);

document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', release)
});
e.addEventListener('dblclick', open);
}

function drag(event) {
let draggedX = (event.clientX - currentX),
draggedY = (event.clientY - currentY);

// check if the left mouse button is clicked
if(event.buttons !== 1) return;
el.style.transform = `rotateX(${rotateX - (draggedY / 2)}deg) rotateY(${rotateY + (draggedX / 2)}deg)`;
}

function release(event) {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', release);
}< /code>
@font-face{font-family:"CourierNew";src:url("../thirdParty/fonts/CourierNew/CourierNew.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"HelveticaRounded";src:url("../thirdParty/fonts/Helvetica/HelveticaRounded.ttf");font-display:swap;}
@font-face{font-family:"JMHTypewriter";src:url("../thirdParty/fonts/typewriterJMH/JMHTypewriter.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"JMHTypewriterThin";src:url("../thirdParty/fonts/typewriterJMH/JMHTypewriter-Thin.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"JMHTypewriterBlack";src:url("../thirdParty/fonts/typewriterJMH/JMHTypewriter-Black.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"LiberationMonoRegular";src:url("../thirdParty/fonts/Liberation/LiberationMono-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"UbuntuRegular";src:url("../thirdParty/fonts/Ubuntu/Ubuntu-R.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"UbuntuBold";src:url("../thirdParty/fonts/Ubuntu/Ubuntu-B.ttf") format("truetype");font-display:swap;}

/* CSS for general styling */
body { border: 2px dashed red;
display: flex;
height : 100vh;
justify-content: center;
align-items : center;
font-family : Helvetica Light,Lato,Helvetica,Ubuntu,sans-serif; }

.cube {
width : 400px;
height : 400px;
position: relative;
transform-style: preserve-3d;
animation : rotate 20s linear infinite; } /* rotational speed is defined here (50=default) */

img {
width : 100%;
height: 100%;
object-fit: cover; }

.box {
top : 0;
left : 0;
width : 100%;
height : 100%;
position: absolute;
opacity : 1;
font : normal normal 0.8rem Helvetica Light,Lato,Helvetica,Ubuntu,sans-serif;
border-radius: 15px; }

/* Applying styles to each face */
.box1 {
transform: translateZ(100px);
transform: translateZ(200px);
border-radius: 19px;
background : lightblue;
border : 12px solid red; }

.box2 {
transform: rotateY(90deg) translateX(100px);
transform: rotateY(90deg) translateX(200px);
transform-origin: right;
border-radius : 19px;
border-color :white;
border-width : 5px;
background :pink; }

.box3 {
transform: rotateY(180deg) translateZ(100px);
transform: rotateY(180deg) translateZ(200px);
border-radius: 9px;
border-color :white;
border-width : 5px;
background :magenta; }

.box4 {
transform: rotateY(-90deg) translateX(-100px);
transform: rotateY(-90deg) translateX(-200px);
transform-origin: left;
border-radius : 9px;
border-color :white;
border-width : 5px;
background :beige; }

.box5 {
transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-200px);
transform-origin: top;
border-radius : 19px;
border-color :white;
border-width : 15px;
background :turquoise; }

.box6 {
transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(200px);
transform-origin: bottom;
border-radius : 9px;
border-color :white;
border-width : 5px;
background : lightgrey; }

/* Animating the elements */
@keyframes rotate {
0%,100% { transform: rotate(0deg); }
20% { transform: rotateY(90deg) rotateZ(90deg); }
40% { transform: rotateY(180deg) rotateZ(-90deg); }
60% { transform: rotateY(270deg) rotateZ(90deg); }
80% { transform: rotateY(360deg) rotateZ(-90deg); }}

.diamond-sign {
width : 100%; /* Adjust size as needed */
height : 100%; /* Adjust size as needed */
background : #ffd700;
display : flex; /* For centering content inside */
justify-content: center; /* For centering content inside */
align-items : center; /* For centering content inside */
border : 12px solid red; /* Optional: adds a border */
border-radius : 9px;
box-sizing : border-box; } /* Ensures padding and border are included in width/height */

.diamond-content {
margin-top : -29px;
margin-left: -25px;
width : 90%;
transform : rotate(-45deg); /* Rotates content back to upright position */
color : black; /* Color of the text/icon */
font : bold normal 28px JMHTypewriter,Helvetica,Lato,sans-serif;
text-align : center; }

.one {
margin : 0!important;
padding: 0 0 0 0.5rem;
display: block;
height : 2.7rem;
font : bold normal 2.5rem HelveticaRounded,Helvetica,LatoBlack,UbuntuRegular,ComfortaaThin,sans-serif; /* 7rem - default */
color :#036; }

.two {
padding : 0 0 0 1.9rem!important;
position: absolute;
display : block;
font : bold normal 1.5rem CourierNew,LiberationMonoRegular;
text-align : left;
letter-spacing: -1px;
color :#036;}

.class1 {
padding:1.5rem;
font-size:1.8rem;
qqborder:1px solid green; }

.class2 {padding:2.3rem 0 2.3rem 0;}< /code>






Mucha gente vende cursos de inglés.
Nosotros no.

teacherplease!
es un workbook online





No somos recién llegados.
Tenemos más de veinte años de experiencia.
dlkñflkñlfksñ f ñsdksñk




Es conveniente distinguir los originales de las copias.
Los originales somos los que nunca te fallamos.
Los originales somos los que nunca te fallamos.




Reemplaza con éxito al workbook de papel.
Lo obtienes por suscripción.
A una tarifa sorprendente.




Nuestro software es propio.
No dependemos de licencias ajenas.
Por eso respondemos inmediatamente a tus necesidades.




Conocemos al estudiante venezolano.
Estamos en Venezuela. Trabajamos en Venezuela.
Te respondemos en Venezuela.


< /code>
< /div>
< /div>
< /p>
Каждое лицо имеет немного текста, который, очевидно, идет с ног на голову и наоборот все время. Есть ли способ заставить текст вращаться, чтобы он всегда мог быть разборчивым? Спасибо!


Подробнее здесь: https://stackoverflow.com/questions/797 ... l-the-time