https://github.com/alexerlandsson/dice
Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.
https://github.com/alexerlandsson/dice
3d css dice jquery
Last synced: 2 months ago
JSON representation
Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.
- Host: GitHub
- URL: https://github.com/alexerlandsson/dice
- Owner: alexerlandsson
- License: mit
- Created: 2020-01-30T12:58:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-12T06:21:58.000Z (12 months ago)
- Last Synced: 2025-03-23T18:53:01.316Z (3 months ago)
- Topics: 3d, css, dice, jquery
- Language: SCSS
- Homepage: https://alexerlandsson.github.io/dice/
- Size: 332 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dice
Rotating CSS dice in 3D using jQuery. Based on my old CodePen [Roll the dice!](https://codepen.io/alexerlandsson/pen/yyWdLE).
**Demo:** https://alexerlandsson.github.io/dice/
## How to use
Include `/docs/css/dice.min.css`, `/docs/js/dice.js` in your project and copy the HTML from `/docs/index.html`. Please note the JavaScript requires jQuery to work.
Place the CSS before inside the head.
```html
```
Place the JavaScript before the closing body tag below the page content. jQuery has to be included before `dice.js`.
```html
```
## Browser support
Works in all modern browsers. Since Internet Explorer does not support `transform-style: preserve-3d;` the dice will not be displayed in 3d in these browsers, but a fallback is included to make sure the die roll still works.
## Working in this repository
#### Install dependencies (npm)
```shell
$ npm install
```
#### Build
To build the project, run gulp from the project root. After the project has been built, the production files are located in the folder `docs`. This folder is published using GitHub Pages.
```shell
$ gulp
```
To watch for changes, a watch gulp task is also added. Start it by running the following command.
```shell
$ gulp watch
```
#### SCSS
You can modify the css by changing the scss variabes in `/src/css/dice.scss`. I do not recommend you changing anything else in this file besides the settings variables at the top.