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

[Гость]

I am trying to create a button that when pressed, toggles one class to another. I want the element to appear 2D flat by default and then skewed when the button is pressed. This is working how I want to but now I am trying to get it to be a smooth transition. When I use the 'transition-duration' property it seems to appear so much larger and then return to the other state. I would like it to go from one state to the other but smoothly without it coming forward so much. This is the example I have: JsFiddle

var trigger = 1; function skewFix() { if(trigger == 0) { document.getElementById("heyBox").classList.add('box2'); document.getElementById("heyBox").classList.remove('box'); document.getElementById("heyBox").classList.toggle('box'); trigger = 1; } else if(trigger == 1){ document.getElementById("heyBox").classList.add('box'); document.getElementById("heyBox").classList.remove('box2'); trigger = 0; } } .box { background-color: black; color: white; width:100px; height: 100px; margin: 30px; -webkit-transform: perspective(100px) rotateX(40deg) ; transition-duration: 500ms; } .box2 { background-color: black; color: white; width:100px; height: 100px; margin: 30px; -webkit-transform: perspective(0px) rotateX(0deg); transition-duration: 500ms; } } .box2 { background-color: black; color: white; width:100px; height: 100px;margin: 30px; -webkit-transform: perspective(0px) rotateX(0deg); transition-duration: 500ms; } hey Click Me!

I have tried with the 'transition-duration' property but it seems to have this bouncing effect going on which is not what I am looking for.


Источник: https://stackoverflow.com/questions/780 ... -to-skewed