5

Bascially trying to show a series of cards similar to playing cards or Tarot which each have a unique picture or image on one side and a text description on the other.

When page is loaded the image will show first off but on clicking a button the card will flip 180 degrees to show a text description of the card/image.

So therefore I guess it's a question of flipping the image in 3d while revealing the div behind. Looked at the Cycle plugin but not sure it is what is needed.

Anyone any ideas?

alkaemia
  • 209
  • 1
  • 4
  • 7
  • Take a look at http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery – psx May 20 '11 at 09:57

4 Answers4

8

Use CSS3 for the rotation:

  • In Mozilla Firefox this will be -moz-transform: rotate(180deg)
  • In Webkit based browsers, i.e. Chrome: -webkit-transform: rotate(180deg)
  • In Opera: -o-transform: rotate(180deg)
  • In IE: -ms-transform: rotate(180deg) (only IE9)
  • In pre-IE9: not easily possible, will need the use of Matrix Filter

Use jQuery rotate plugin to unify all the browser differences.

See fiddle: http://jsfiddle.net/garreh/bqYUA/

Gary Green
  • 22,045
  • 6
  • 49
  • 75
  • Sorry, I was not so clear - I mean flip through 180 in a 3d way not a normal rotate. So for example, it starts of with the image and on click flips/twists to reveal the reverse of the 'card' which is a div the same size with text. I guess it needs Html5 Canvas no? – alkaemia May 20 '11 at 10:01
  • You could fake it by transforming the image to appear 90 degrees (side on), with a bit of skewing for perspective, then swap the image for the reverse image and continue the animation. – chrisfrancis27 May 20 '11 at 10:06
3

Use CSS and JQuery, you dont even need a plugin:

CSS for 180 degrees, supporting different browsers:

.rotate-180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

And then simply toggle the class of the target element via jQuery with the trigger of your choice (I use onClick for my scenario, works fine!)

<script type="text/javascript">
    $(".myelement").on("click", function() {
        $(this).toggleClass("rotate-180");
    });
</script>
Steini
  • 2,753
  • 15
  • 24
2

possibly your are looking for this :

http://blog.kenmoredesign.com/2009/01/26/flip-plugin-for-jquery/

Community
  • 1
  • 1
xkeshav
  • 53,360
  • 44
  • 177
  • 245
  • @diEcho does flip support images, can't seem to get it working on fiddle: http://jsfiddle.net/garreh/eFqVU/1/ -- it's just getting the content of #back not cloning the div itself. It's also only pushing that content once the animation is complete. It looks like this effect is only for basic divs :| – Gary Green May 20 '11 at 11:07
  • @Gary that may be not perfect, you just check the logic what they used and alter the code according to need :) – xkeshav May 20 '11 at 11:10
  • @diEcho, sure though they do not have any examples of using images, only basic divs, so I'm wondering if it's even possible. What kind of effect did that link you gave actually have? It's hard to tell as the demo link they provided isn't working anymore – Gary Green May 20 '11 at 11:53
  • I found the following which is a bit simpler but might work better for my purpose above as it seems more customizable in the text/html side: http://jonraasch.com/blog/quickflip-jquery-plugin – alkaemia May 20 '11 at 14:21
1

Perhaps faking it by just scaling one down to nothing and the other up from nothing.

$("#Card_Picture").click(function () {
  $('#Card_Picture').hide("scale", {percent: 0, direction: 'horizontal'}, 1000,function() {
  $('#Card_Text').show("scale", {percent: 100, direction: 'horizontal',  from: {height:120, width:0}}, 1000);
  });
});


<div id='Card_Picture' style="float:left; background: green; width: 80px; height: 120px; z-index:2; position:absolute;"></div>
<div id='Card_Text' style="float:left; background: red; width: 80px; height: 120px; z-index:1;position:absolute; display: none"></div>

Need jQuery UI

Tokes
  • 216
  • 2
  • 8