Перспектива CSS с проблемой поворота и перевода

Я пытаюсь сделать тип перехода CSS только слайдом из одного раздела контента в другой. Чтобы сделать это интересным способом, я использую perspective и rotateX CSS, чтобы, по сути, расположить содержимое страницы. Затем я пытаюсь сдвинуть содержимое вниз экрана, используя translateY

По отдельности и translateY, и rotateX работают отлично, независимо от того, что такое perspective. Однако в сочетании он работает только с определенными perspective в зависимости от размера окна и значения rotateY.

В этот jsFiddle он работает так, как я хотел бы, в размерах окна Я пытался. Проблема в том, что я хотел бы, чтобы значение perspective было ниже, около 250px, но я не могу сделать это, не нарушая анимацию.

Я попытался использовать более высокую степень rotateY вместо понижения perspective, но возникла та же проблема.

@keyframes slide {
  0% { transform: perspective(450px); }
  25% { transform: perspective(450px) rotateX(30deg); }
  50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%);  }
}

Я тестировал это на CSS Deck и jsFiddle как в FireFox, так и в Chrome, и это кажется постоянной проблемой.

Может ли кто-нибудь указать мне причину, почему это происходит, и предложить обходной путь?


css rotation transform perspective
person Zach Saucier    schedule 01.01.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте установить perspective как отдельное правило для родительского элемента (вместо того, чтобы быть частью transform в animation).

.parent {
    perspective: 250px;
}

@keyframes slide {
    25% { transform: rotateX(30deg); }
    50%, 100% { transform: rotateX(30deg) translateY(100%); }
}

Обновленная скрипта: http://jsfiddle.net/myajouri/DYpnU/

Мои рассуждения:

  1. perspective не меняется во время анимации, поэтому нет смысла использовать его как часть анимации.

  2. Поскольку ваши элементы занимают 100% области родителя, установка perspective для родителя должна давать тот же результат, что и установка его для самих элементов (внутри transform).

  3. Кажется, это решает вашу проблему (см. скрипку выше).

ОБНОВЛЕНИЕ: после дополнительных экспериментов я обнаружил, что явная установка начального значения translateY(0) в анимации также решит проблему.

@keyframes slide {
    0% { transform: perspective(150px); }
    25% { transform: perspective(150px) rotateX(30deg) translateY(0); }
    50%, 100% { transform: perspective(150px) rotateX(30deg) translateY(100%); }
}

Обновленная скрипта: http://jsfiddle.net/myajouri/YJS3v/

person myajouri    schedule 01.01.2014
comment
Замечательная работа, +1! Используя этот подход, я смог получить нужный эффект. Мне все еще любопытно, почему оригинальный метод не работает. есть идеи? - person Zach Saucier; 02.01.2014
comment
Я думаю, потому что ваш perspective прикреплен к самому элементу, и поскольку ваш элемент меняет свою форму и положение во время анимации, perspective-origin также смещается и заставляет анимацию воспроизводиться иначе, чем ожидалось, особенно когда значение перспективы слишком маленькое, что усиливает 3D-преобразования. - person myajouri; 02.01.2014
comment
Но почему начальная точка перспективы перескакивает на такое далекое значение, по существу изменяя способ отображения анимации? Я не понимаю, как у него может быть такая возможность - person Zach Saucier; 02.01.2014
comment
Просто обновил ответ другим решением. Я работаю над аргументацией: P и скоро обновлю. - person myajouri; 02.01.2014
comment
Так что у меня нет однозначного ответа, почему анимация воспроизводилась именно так. В этом, кажется, играют роль следующие вещи: 1. тот факт, что ваш translateY(100%) может быть очень большим числом в зависимости от размера вашего окна, и 2. тот факт, что вы используете небольшое значение для перспективы, что означает, что перспектива точка схода находится очень близко к зрителю, а это означает, что эффекты преобразования CSS будут усилены. Вы можете попробовать уменьшить размер кадра/окна до очень маленького размера (что означает маленькое значение translateY(100%)), и проблема исчезнет. - person myajouri; 02.01.2014

arrow_upward
2
arrow_downward

Только небольшое улучшение по сравнению с ответом myajouri.

По крайней мере, в Chrome вы можете написать

@-webkit-keyframes slide {
  0% { -webkit-transform: perspective(50vh); }
  10%,15% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(0%); }
  50%,100% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(100%);  }
}

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

демонстрация

(Не проверено в других браузерах)

person vals    schedule 05.01.2014
comment
Я целую вечность боролся с получением перспективы для работы с отзывчивой 3D-формой с помощью vw, изменение ее на vh было волшебным решением, поэтому, если у кого-то еще есть аналогичная проблема, по какой-то причине vh работает намного лучше, чем vw для адаптивного 3d ! - person ceindeg; 05.12.2017