Как сделать стиль преобразования плавным при переключении с плоского на наклонный? ⇐ Jquery

[Гость]

Я пытаюсь создать кнопку, которая при нажатии переключает один класс на другой. Я хочу, чтобы элемент по умолчанию выглядел плоским в 2D, а затем искажался при нажатии кнопки. Это работает так, как я хочу, но теперь я пытаюсь добиться плавного перехода. Когда я использую свойство «продолжительность перехода», кажется, что оно кажется намного больше, а затем возвращается в другое состояние. Я бы хотел, чтобы он переходил из одного состояния в другое, но плавно, без такого сильного выдвижения вперед. У меня есть такой пример: JsFiddle

var триггер = 1; функция skewFix() { если (триггер == 0) { document.getElementById("heyBox").classList.add('box2'); document.getElementById("heyBox").classList.remove('box'); document.getElementById("heyBox").classList.toggle('box'); триггер = 1; } иначе, если (триггер == 1) { document.getElementById("heyBox").classList.add('box'); document.getElementById("heyBox").classList.remove('box2'); триггер = 0; } .box { цвет фона: черный; белый цвет; ширина: 100 пикселей; высота: 100 пикселей; поле: 30 пикселей; -webkit-transform: перспектива (100 пикселей) RotateX (40 градусов) ; продолжительность перехода: 500 мс; } .box2 { цвет фона: черный; белый цвет; ширина: 100 пикселей; высота: 100 пикселей; поле: 30 пикселей; -webkit-transform: перспектива (0 пикселей) RotateX (0 градусов); продолжительность перехода: 500 мс; } } .box2 { цвет фона: черный; белый цвет; ширина: 100 пикселей; высота: 100 пикселей; поле: 30 пикселей; -webkit-transform: перспектива (0 пикселей) RotateX (0 градусов); продолжительность перехода: 500 мс; эй Нажмите на меня!

Я пробовал использовать свойство «transition-duration», но, похоже, возникает эффект подпрыгивания, а это не то, что мне нужно.