https://github.com/ninjasort/jquery-flipper

CSS3 card flip effect.
https://github.com/ninjasort/jquery-flipper

animation jquery

Last synced: about 17 hours ago
JSON representation

CSS3 card flip effect.

• Host: GitHub
• URL: https://github.com/ninjasort/jquery-flipper
• Owner: ninjasort
• License: mit
• Created: 2014-08-31T02:57:19.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-02T04:51:13.000Z (over 8 years ago)
• Last Synced: 2024-12-10T08:03:11.346Z (18 days ago)
• Topics: animation, jquery
• Language: JavaScript
• Homepage: http://cameronroe.github.io/jquery-flipper
• Size: 1.39 MB
• Stars: 15
• Watchers: 3
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Flipper

A simple way to add a CSS3 flip effect to your content.

## Installation

```

$ bower install jquery-flipper --save

```

In your web page:

```html

  jQuery Flipper

  

    

    

    

  

  

  

  

  

    $('#myFlipper').flipper({

      rotationType: 'left-slide',

      depth: 1000,

      speed: 0.2

    });

  

```

## Options

You can also pass flipper options.

- rotationType [string] the type of rotation (left, right, up, down, left-slide, right-slide)

- event [string, object] this event to bind to

	- “hover”

	- “click”

	- {type: “keydown”, keyCode: 13}

- depth [number] the perspective applied to the element rotation (100 - 1000)

- speed [number] the speed of the rotation (0.1 - 2.0)

## Examples

View the demo [here](http://cameronjroe.github.io/jquery-flipper) or in the demo directory.