Проблема с вращающимся изображением в Joomla 5 (SP Page Builder V5 + Custom CSS/HTML) ⇐ Html

Программисты Html
Ответить
Anonymous
 Проблема с вращающимся изображением в Joomla 5 (SP Page Builder V5 + Custom CSS/HTML)

Сообщение Anonymous »

I'm working with Joomla 5 using SP Page Builder version 5, and I've embedded custom HTML/CSS via CodePen to prototype a visual effect.
CodePen 1 (Image rotates but doesn't stay upright):


/*Slide 1*/
.round-container {
margin: 0 auto;
position: relative;
width: 80vw;
height: 80vw;
max-width: 500px;
max-height: 500px;
overflow: hidden;
}

.round-container .center-object {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 30;
}

.round-container .center-object img {
max-width: 80%;
}

/*orbit one*/
.round-container .orbit-one {
position: absolute;
z-index: 20;
border-radius: 50%;
width: 100%;
height: 100%;
animation: spin 20s linear infinite;
}

.round-container .orbit-one::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
border: 2px solid rgb(36, 36, 102);
border-radius: 50%;
transform: translate(-50%, -50%);
}

.round-container .orbit-one .item {
position: absolute;
top: 50%;
left: 50%;
height: 0px;
transform: translate(-50%, -50%) rotate(calc(360deg / 4 * var(--i)))
translate(220px);
background-color: transparent;
padding: 0px 0;
transition: none;
}

.round-container .orbit-one .item img {
max-width: 20%;
height: auto;
display: block;
transform: rotate(calc(-1 * var(--angle)));
}

.round-container .orbit-two .item img {
max-width: 20%;
height: auto;
display: block;
transform: rotate(calc(-1 * var(--angle)));
}

/*orbit-two*/
.round-container .orbit-two {
position: absolute;
z-index: 20;
border-radius: 50%;
width: 100%;
height: 100%;
animation: spin 30s linear infinite;
}

.round-container .orbit-two::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
border: 2px solid rgb(36, 36, 102);
border-radius: 50%;
transform: translate(-50%, -50%);
}

.round-container .orbit-two .item {
position: absolute;
top: 50%;
left: 50%;
height: 0px;
transform: translate(-50%, -50%) rotate(calc(360deg / 8 * var(--i)))
translate(300px);
background-color: transparent;
padding: 0px 0;
transition: none;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}< /code>





Изображение




Изображение

Изображение

Изображение

Изображение




Изображение

Изображение

Изображение

Изображение

Изображение

Изображение

Изображение

Изображение



< /code>
< /div>
< /div>
< /p>
Codepen 2 (изображение остается вертикальным, но сменой границ): < /p>


/* Orbit Animation Container */
.ums-orbit-diagram {
display: flex;
width: 100%;
height: 500px;
align-items: center;
justify-content: center;
position: relative;
}

.ums-orbit-main {
width: 80vmin;
height: 80vmin;
max-width: 400px;
max-height: 400px;
position: relative;
}

/* Center Mascot */
.ums-orbit-center {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
transform: translate(-50%, -50%);
border-radius: 50%;
text-align: center;
z-index: 10;
background: linear-gradient(135deg, #ff6b35, #f7931e);
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: 4px solid white;
}

.ums-orbit-center img {
width: auto;
height: 150px;
box-shadow: none !important;
}

/* Orbit Containers */
.ums-orbit-track {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 2px solid #000;
border-radius: 50%;
}

.ums-orbit-track-outer {
animation: umsOrbitSpin 60s linear infinite;
}

.ums-orbit-inner {
width: 280px;
height: 280px;
position: absolute;
border: 2px dashed #243666;
box-sizing: border-box;
border-radius: 50%;
top: calc(50% - 140px);
left: calc(50% - 140px);
animation: umsOrbitSpin 40s linear infinite;
}

.ums-orbit-inner .ums-orbit-tech {
position: absolute;
transform-origin: center;
}

.ums-orbit-tech {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
}

.ums-orbit-tech img {
width: 80px;
height: 80px;
position: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
animation: umsCounterSpin 40s linear infinite;
transition: transform 0.3s ease;
box-shadow: none !important;
background: none;
}

.ums-orbit-track-outer .ums-orbit-tech img {
animation: umsCounterSpin 60s linear infinite;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
padding: 0;
}

.ums-orbit-tech img:hover {
transform: scale(1.2);
}

/* Inner orbit positions (4 items) */
/* Inner orbit positions (4 items, edge touching the dashed border) */
.ums-orbit-inner .ums-orbit-tech:nth-child(1) {
transform: rotate(0deg) translate(100px) rotate(0deg);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(2) {
transform: rotate(90deg) translate(100px) rotate(-90deg);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(3) {
transform: rotate(180deg) translate(100px) rotate(-180deg);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(4) {
transform: rotate(270deg) translate(100px) rotate(-270deg);
}

/* Outer orbit positions (8 items, edge touching the border) */
.ums-orbit-extended .ums-orbit-tech:nth-child(1) {
transform: rotate(0deg) translate(175px) rotate(0deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(2) {
transform: rotate(45deg) translate(175px) rotate(-45deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(3) {
transform: rotate(90deg) translate(175px) rotate(-90deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(4) {
transform: rotate(135deg) translate(175px) rotate(-135deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(5) {
transform: rotate(180deg) translate(175px) rotate(-180deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(6) {
transform: rotate(225deg) translate(175px) rotate(-225deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(7) {
transform: rotate(270deg) translate(175px) rotate(-270deg);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(8) {
transform: rotate(315deg) translate(175px) rotate(-315deg);
}

/* Animations */
@keyframes umsOrbitSpin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@keyframes umsCounterSpin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(-360deg);
}
}

/* Responsive Design */
@media (max-width: 1024px) {
.ums-container {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

.ums-content-left h1 {
font-size: 2.8rem;
}

.ums-orbit-diagram {
height: 500px;
}

.ums-orbit-main {
width: 70vmin;
height: 70vmin;
}

.ums-orbit-inner .ums-orbit-tech:nth-child(1) {
transform: translate(0, -150px);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(2) {
transform: translate(106px, -106px);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(3) {
transform: translate(150px, 0);
}

.ums-orbit-inner .ums-orbit-tech:nth-child(4) {
transform: translate(106px, 106px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(1) {
transform: translate(0, -200px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(2) {
transform: translate(141px, -141px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(3) {
transform: translate(200px, 0);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(4) {
transform: translate(141px, 141px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(5) {
transform: translate(0, 200px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(6) {
transform: translate(-141px, 141px);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(7) {
transform: translate(-200px, 0);
}

.ums-orbit-extended .ums-orbit-tech:nth-child(8) {
transform: translate(-141px, -141px);
}
}

@media (max-width: 768px) {
.ums-orbit-main {
width: 90vmin;
/* Adjust for smaller viewports */
height: 90vmin;
}

.ums-orbit-inner .ums-orbit-tech,
.ums-orbit-extended .ums-orbit-tech {
width: 50px;
height: 50px;
}

.ums-orbit-diagram {
height: 400px;
}

.ums-orbit-tech img,
.ums-orbit-track-outer .ums-orbit-tech img {
width: 45px;
height: 45px;
margin-left: -22.5px;
margin-top: -22.5px;
}
}

/* Loading animation */
.ums-orbit-center {
animation: umsPulse 2s ease-in-out infinite alternate;
}

@keyframes umsPulse {
0% {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

100% {
box-shadow: 0 25px 50px rgba(255, 107, 53, 0.4);
}
}< /code>






Изображение




Изображение

Изображение

Изображение

Изображение






Изображение

Изображение

Изображение

Изображение

Изображение

Изображение

Изображение

Изображение




< /code>
< /div>
< /div>
< /p>
Чего я пытаюсь достичь:

Я хочу, чтобы изображение вращалось при сохранении своей верной ориентации, так что он не наклоняется и не соблюдает 360. вертикально?

Как предотвратить смену границы во время анимации для CP2? < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... m-css-html
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»