https://github.com/volorf/hover3d.js

A cool 3D hover effect for your awesome web project.
https://github.com/volorf/hover3d.js

3d 3d-hover 3d-hover-effect apple-tv-hover-effect hover-3d hover-effects

Last synced: about 2 months ago
JSON representation

A cool 3D hover effect for your awesome web project.

• Host: GitHub
• URL: https://github.com/volorf/hover3d.js
• Owner: Volorf
• License: mit
• Created: 2020-08-28T21:05:29.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-19T18:26:17.000Z (almost 4 years ago)
• Last Synced: 2024-10-12T22:45:06.106Z (2 months ago)
• Topics: 3d, 3d-hover, 3d-hover-effect, apple-tv-hover-effect, hover-3d, hover-effects
• Language: JavaScript
• Homepage: https://olegfrolov.design/hover3d
• Size: 1.28 MB
• Stars: 76
• Watchers: 5
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Cool 3D hover effect for your awesome web project

Have you seen these amazing 3D hover effect on Apple TV? Have you known that you can easily make similar effect? Just like that!

![Apple TV 3D Hover Effect](/hover3D.gif)

## Three simple steps

1. [Download it](https://raw.githubusercontent.com/Volorf/Hover3D.js/master/hover3D.js);

2. Add `hover3D.js` to your page;

3. Create a new `Hover3D()` instance.

🔥 [Live demo](https://olegfrolov.design/hover3d/)

## How to add hover3D.js to my page

Put a hover3D.js link in the `` section.

```html

```

## How to create 3D hover effect

It's just a single line of code!

```html

    let myHover3D = new Hover3D(".card"); // Yep! That's it.