Geek Answers Handbook

JQuery to switch 180 degrees

It basely tries to show a series of cards, like game cards or tarot cards, each of which has a unique image or image on one side and a text description on the other.

When the page loads, the image will be displayed first, but when the button is pressed, the map will be flipped 180 degrees to display a text description of the map / image.

So, I think this is a question with translating an image into 3d, showing the div behind. I looked at the Cycle plugin, but I'm not sure if this is what you need.

Any ideas?

+5
source share
4 answers

Use CSS3 to rotate:

  • In Mozilla Firefox, it will be -moz-transform: rotate(180deg)
  • In Webkit-based browsers, i.e. Chrome:-webkit-transform: rotate(180deg)
  • In Opera: -o-transform: rotate(180deg)
  • IE: -ms-transform: rotate(180deg) ( IE9)
  • pre-IE9: ,

jQuery rotate plugin, .

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

+8

CSS JQuery, :

CSS 180 , :

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

jQuery ( onClick , !)

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

, , , - .

$("#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>

jQuery

+1

More articles:


All Articles