0

Есть сайт, создан скорее для тренировки. https://seregasmyfavoritesites.on.drv.tw/Site/Kvashenaya/ Рабочий на 99%. На нем есть 2 анимации. Два heading "КВАШЕНАЯ" и "САША". К ним приклеены 2 анимации, практически одинаковые.

<style>
 :root {
 --visota: 100vh;
 --visota_menu: calc(20px + 7vw);
 **--visota_real**: calc(var(--visota) - var(--visota_menu) );
 --random }
 </style>

<style>
@keyframes a_Down_Random {
  from {transform-origin: center top}
  75%  {transform-origin: center bottom;
        transform: perspective(500px)
                   translate3d(400px, var(--visota_real), 0px)
                   rotateX(calc(var(--random,1)*360deg)) 
                   rotateY(calc(var(--random,1)*360deg))
                   rotateZ(calc(var(--random,1)*180deg)) } }
                   
@keyframes a_X0to60-Zminus60plus30 {                
        from {transform-origin: left top}               
          5% {transform: rotateX(-10deg)}
          9% {transform: rotateX(15deg)}
         13% {transform: rotateX(-40deg)}
         17% {transform: rotateX(60deg)}
         21% {transform: rotateX(-60deg)}
         25% {transform: rotateX(40deg)}
         29% {transform: rotateX(-30deg)}
         33% {transform: rotateX(20deg)}
         37% {transform: rotateX(-10deg)}
         41% {transform: rotateX(5deg)}
         45% {transform: rotateX(0deg)}
         49% {transform: rotateZ(70deg)}
         53% {transform: rotateZ(15deg)}
         57% {transform: rotateZ(60deg)}
         61% {transform: rotateZ(20deg)}
         65% {transform: rotateZ(50deg)}
         69% {transform: rotateZ(30deg)}
         73% {transform: rotateZ(35deg)}
         85% {transform: rotateX(85deg)
                         rotateZ(20deg) 
                         translateY(var(--visota_real)) }
          to {transform-origin: left top}  }
</style>

Ответ: в точке 85% строку rotateX(85deg) перенести после translateY()

Слово "КВАШЕНАЯ" падает по анимации a_Down_Random {}, Слово "САША" падает по анимации a_X0to60-Zminus60plus30 {},

остальной код, наверное, лишний. Т.к. все отображается приблизительно правильно, анимация запускается.

Слово "КВАШЕНАЯ" падает верно. Слово "САША" падает ПОЧТИ верно . Оно болтается до своих 73% правильно. Но далее в строке 85% {transform: translateY(var(--visota_real)) что-то ломается. Эта "САША" движется вниз на неизвестную (может, половина высоты экрана ?) высоту (а должна на точно такую же высоту , как и слово "КВАШЕНАЯ") и возвращается вверх. Почему ?

Эти анимации одинаковые. Используют одну CSS-переменную var(--visota_real) -- она примерно показывает высоту экрана. По задумке эта "САША" должна опуститься на высоту translateY(var(--visota_real)) , и за 15% времени подняться в исходную позицию. Почему ее сносит вниз и сразу назад вверх ? Почему ее тянет в ноль экрана ? Я подозреваю, что это связано со transform-origin: . Где-то на этих 85% происходит то, что центр этой "САШИ" определяется не внутри нее, а наверху страницы, где она висит изначально. Не могу понять -- там же все одинаковое !

4
  • Смотрите в сторону transform-origin
    – DiMithras
    Commented 29 июл. 2023 в 18:48
  • @DiMithras, так а куда мне его записать . Я всю жизнь думал, что transform-origin относится к самому объекту, а не к родителю. Там и так уже 2 штуки указано. В короткой анимации нет даже to {}, и все работает.
    – serega da
    Commented 29 июл. 2023 в 18:53
  • @DiMithras, Короткая анимация падает ровно на высоту var(--visota_real) , как и записано. Почему длинная анимация не может упасть на ту же высоту ?
    – serega da
    Commented 29 июл. 2023 в 18:59
  • @DiMithras, я утверждал, что все одинаково. Но нет. Для чистоты я вставил transform:perspective(500px) -- и что то изменилось ! Эту САШУ стало болтать по всему экрану. А какая связь translate и perspective(500px) ?
    – serega da
    Commented 29 июл. 2023 в 19:39

1 ответ 1

1

Я понял, простое очевидное решение. transform-origin не причем. В короткой анимации важна последовательность : сначала translateY и translateX, а потом уже rotateX или rotateY. rotateX и Y поворачивает ось объекта. И после rotateX все перемещения происходят в новой плоскости. При изменении translateX и translateY и rotateZ ось объекта не изменяется, она и так смотрит на экран. Все повороты после перемещений. Скорее всего, здесь надо указать еще transform-style: preserve-3d (хотя для лучшего дизайну, здесь лучше указать flat)

@DiMithras, спасибо за попытку ! :)

10
  • Вам спасибо, что в ответ оформили :)
    – DiMithras
    Commented 29 июл. 2023 в 21:08
  • Ещё можете поэкспериментировать с transform-style: preserve-3d
    – DiMithras
    Commented 29 июл. 2023 в 21:32
  • @DiMithras, исправлять сам вопрос? Тут все равно код недостаточен для проверки. Там надо библиотеки 2 штуки подключать на onmouseenter() и HTML писать. Много работы :)
    – serega da
    Commented 29 июл. 2023 в 21:48
  • Да нет, если удовлетворены результатам, ничего не надо менять, а по нюансам можно новый вопрос сделать. И постараться в минимальный, самодостаточный и воспроизводимый пример, просто даже хотя бы ради того, чтобы вопрос-ответ были полезны остальным участникам или случайно заглянувшим.
    – DiMithras
    Commented 29 июл. 2023 в 22:04
  • Мне сайт выдал целый 1 балл за решение собственного вопроса :). Это неверно. Так рейтинг превратится в фантик
    – serega da
    Commented 30 июл. 2023 в 8:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.