Может ли свойство перспективы быть анимировано (перенесено) из исходного (0 / нет) в заданное значение?

Я пытаюсь оживить перспективу с любого начального значения до 1000 пикселей в течение 2 секунд. Если я установлю начальную перспективу на 0 или 'начальную', свойство transition-duration вообще не будет работать. Это работает, когда начальное значение установлено на какое-то смешное число, например, 100000px, но это не чисто. Есть идеи?

Css:

main {
    overflow: scroll;
    display: flex;
    width: 100vw;
    height: 100vh;
    //border: 5px solid red;
     //perspective: 1000px;
    transition-duration: 2s;
    perspective: 0px;
}

.perspective {
  perspective: 1000px;
  transition-duration: 2s;
}

Jquery:

$('#cube').hover(
    function() {
        $('main').addClass('perspective');
    }, function() {
        $('main').removeClass('perspective');
    }
);

0 ответов

Другие вопросы по тегам