How do I make the transform style be smooth when toggling flat to skewed?

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

`.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;
}`

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.