Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sparanoid/cube.less
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)
https://github.com/sparanoid/cube.less
css less
Last synced: 5 days ago
JSON representation
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)
- Host: GitHub
- URL: https://github.com/sparanoid/cube.less
- Owner: sparanoid
- License: mit
- Created: 2014-02-25T06:06:54.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-05-28T10:16:15.000Z (over 1 year ago)
- Last Synced: 2024-06-29T19:06:14.844Z (4 months ago)
- Topics: css, less
- Language: CSS
- Homepage: https://sparanoid.com/lab/cube.less/
- Size: 137 KB
- Stars: 55
- Watchers: 3
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-web-effect - cube.less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)
- awesome-web-effect - cube.less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)
README
# cube.less
[](https://travis-ci.org/sparanoid/cube.less)
[](https://david-dm.org/sparanoid/cube.less#info=devDependencies)
3D (animated) cube using only CSS (LESS).
## Demo
See this [demo page](http://sparanoid.com/lab/cube.less/). There's also a [live production site (WIP)](http://avoscloud.com/) using these cubes.
## Install
```ssh
$ bower install cube.less
```
## Options
### Mixins
#### .makecube
Main mixin, it has the following options:
##### @size
Default: `100px`
The length of a cube side.
##### @depth
Default: `50px`
Cube depth alone the Z-axis.
##### @rotate-x
Default: `0deg`
Rotate the cube along the X-axis.
##### @rotate-y
Default: `0deg`
Rotate the cube along the Y-axis.
##### @rotate-z
Default: `0deg`
Rotate the cube along the Z-axis.
#### .makeperspective
##### @perspective
Default: `2500`
Make canvas perspective to parent element.
### Additional Classes
#### .cube-border
No cube background, like ouline vision. apply it to cube container.
#### .cube-borderless
No outline, apply it to cube container.
#### .cube-unselectable
Make all cubes unselectable, apply it to cube parent wrapper, or specific cube. Both are ok.
## Setup
The following is a basic markup:
```html
...
...
```
## Animation
See [demo](https://github.com/sparanoid/cube.less/blob/master/demo/index.html).
## Dev Setup
npm install && grunt server
## Author
**Tunghsiao Liu**
- Twitter: @[tunghsiao](http://twitter.com/tunghsiao)
- GitHub: @[sparanoid](http://github.com/sparanoid)
## Licenses
MIT