https://github.com/component/flipbox

Double-sided flip box using css transformations.
https://github.com/component/flipbox

Last synced: 12 days ago
JSON representation

Double-sided flip box using css transformations.

• Host: GitHub
• URL: https://github.com/component/flipbox
• Owner: component
• Created: 2013-05-02T22:56:36.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-05-02T22:58:47.000Z (over 11 years ago)
• Last Synced: 2024-05-08T17:10:52.549Z (8 months ago)
• Language: JavaScript
• Size: 113 KB
• Stars: 14
• Watchers: 8
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# flipbox

  Double-sided flip box using css transformations.

## Installation

    $ component install component/flipbox

## Example

```html



  


    
front

    
back

  



  var card = document.querySelector('#card');

  var Flipbox = require('flipbox');

  var box = new Flipbox(card);

  box.el.onclick = function(){

    box.flip();

  };

```

## API

### Flipbox(el)

  Initialize a `Flipbox` with the given container `el`. Inside

  this should be a wrapper `div`, within that should be the two

  faces. View _./example.html_ for a full example.

### Flipbox#flip()

  Toggle the visibile face.

### Flipbox#front()

  Show the front face.

### Flipbox#back()

  Show the back face.

## License

  MIT