Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrick-s-young/box-kite
Make Floating Boxes with CSS 3D Transforms
https://github.com/patrick-s-young/box-kite
3d animation css es6 frontend html5 javascript react
Last synced: 3 months ago
JSON representation
Make Floating Boxes with CSS 3D Transforms
- Host: GitHub
- URL: https://github.com/patrick-s-young/box-kite
- Owner: patrick-s-young
- License: mit
- Created: 2019-11-27T18:39:03.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T05:10:51.000Z (about 2 years ago)
- Last Synced: 2023-03-04T10:04:15.786Z (almost 2 years ago)
- Topics: 3d, animation, css, es6, frontend, html5, javascript, react
- Language: JavaScript
- Homepage: https://patrick-s-young.github.io/BoxKite
- Size: 4.67 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BoxKite
## Make Floating Boxes with CSS 3D Transforms
BoxKite renders WebGL-like 3D cuboids using CSS 3D Transforms. Since the 3D object is CSS, it can interact more seamlessly with any background HTML elements. For instance, imagine a BoxKite ad unit that starts in the corner of the page and expands to the center when clicked.
## Running Locally
Make sure you have [Node.js](http://nodejs.org/) installed.
```sh
git clone https://github.com/patrick-s-young/BoxKite.git # or clone your own fork
cd box-kite
npm install
npm start
```
## FeaturesExplode View

Zoom In/Out

Prev/Next Gallery
## Built With
* [React](https://react-cn.github.io/react/downloads.html) - JavaScript UI library.
* [react-spring](https://www.react-spring.io/) - JavaScript spring-physics based animation library.
* [webpack](https://webpack.js.org/) - Static module builder.## Authors
* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)
* **Adam Stover** - [Adam Stover](https://github.com/adam-stover)## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
Thanks to @citrusvanilla and @jacobbanks for the initial inspiration.