Flip effect in css animation doesn't work

Question

I have made a flip card. But the rotate effect when you click on "press card" doesn't work

Can anyone help me?

DEMO

Answer 1

The transitions are set up incorrectly, change it to

.cci-press-card__wrap {
  position: relative;
  width: 300px;
  height: 380px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}

CodePen

Answer 2

Do you try to follow some articles?

http://css3.bradshawenterprises.com/flip/

http://davidwalsh.name/css-flip

Hope this can help!

Answer 3

I fixed your code. It was a tiny CSS change. You cannot animate CSS "transform" since it isn't a support property. You must instead write "all".

If you do that then you should have a working flip card :)

Enjoy.