0

I am trying to perform a flip effect using CSS. How can I get -

transform: perspective(1200px) rotateX(0deg)

from

transform: perspective(1200px) rotateX(90deg)

using jQuery's .animate() function?

I've tried to do with jQuery 2D Transformation Plugin but no success.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Anton Sementsov
  • 1,196
  • 6
  • 18
  • 34
  • Just add a custom CSS Hook and you're ready to go. Though, I don't know of any standard to pass more than one argument to it. – Fabrício Matté Jan 28 '13 at 18:47
  • You could try the answer here, you would just need to modify it to accept two arguments. http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions – Kevin B Jan 28 '13 at 18:49
  • http://jsfiddle.net/ryleyb/ERRmd/ – Dom Jan 28 '13 at 22:33

1 Answers1

1

Use native CSS. Something like this:

.panel {
    transform: perspective(1200px) rotateX(0deg);
    transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
}
.panel.flip {
    transform: perspective(1200px) rotateX(90deg);
}

Then just toggle the class.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Thank this helped, but it works only in Firefox, I tried to rewrite code in such way... will put my code in answer, but it doesn`t help me...flip efect works only in Firefox... how can i make it multibrowser? – Anton Sementsov Feb 01 '13 at 11:14
  • It also works in IE10. To make it work in Chrome, add `-webkit-transform` and change the `-webkit-transition` to affect `-webkit-transform`. – Niet the Dark Absol Feb 01 '13 at 17:27