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?

You can find it here.... http://stackoverflow.com/questions/10035643/jquery-how-to-do-a-flip-effect — Deepu Sasidharan, Jan 06 '14 at 05:01

score 3 · Accepted Answer · answered Jan 06 '14 at 04:57

3

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

answered Jan 06 '14 at 04:57

adeneo

312,895
29
395
388

Can it flip immediately after click instead of showing the `backface` then flip? – Felix Jan 06 '14 at 05:04
Is exactly that! Thank you so much – user3130064 Jan 06 '14 at 21:20

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Do you try to follow some articles?

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

http://davidwalsh.name/css-flip

Hope this can help!

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 06 '14 at 04:52

Raphaël VO

2,413
4
19
32

This should had been a comment – Vikram Deshmukh Jan 06 '14 at 04:59

score 0 · Answer 3 · answered Jan 06 '14 at 04:56

0

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.

answered Jan 06 '14 at 04:56

BLewis

150
1
7

Flip effect in css animation doesn't work

3 Answers3