https://github.com/zenoo/css3-cube

A canvas-free, CSS3 only cube
https://github.com/zenoo/css3-cube

animation css3

Last synced: about 1 month ago
JSON representation

A canvas-free, CSS3 only cube

• Host: GitHub
• URL: https://github.com/zenoo/css3-cube
• Owner: Zenoo
• License: mit
• Created: 2019-02-28T08:11:16.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T09:11:44.000Z (almost 2 years ago)
• Last Synced: 2024-11-23T09:15:58.475Z (about 1 month ago)
• Topics: animation, css3
• Language: JavaScript
• Homepage:
• Size: 1.39 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# CSS3 Cube

A canvas-free, CSS3 only Cube

[![Demo](https://github.com/Zenoo/CSS3-Cube/raw/master/cube-demo.gif)](https://jsfiddle.net/Zenoo0/krn7ygd3/)

### Doc

* **Installation**

Simply import CSS3 Cube into your HTML.

```HTML

	

```

* **How to use**

Create a new [`Cube`](https://zenoo.github.io/CSS3-Cube/Cube.html) object with the targeted node as the first parameter :

```

let cube = new Cube('#yourNode', options);

// OR

let cube = new Cube(element, options);

```

* **Options**

```js

{

  ratio: 2 // Ratio at which mousemoves will impact the rotation of the cube

}

```

* **Example**

See this [JSFiddle](https://jsfiddle.net/Zenoo0/krn7ygd3/) for a working example

## Authors

* **Zenoo** - *Initial work* - [Zenoo.fr](https://zenoo.fr)