A javascript class that adds a swivel hover effect to anything.
npm i swively --save
yarn add swively
and then in your code, import it:
import Swively from 'swively';
The element that will receive the swivel hover effect must have a dedicated container for this effect to work.
example:
<div id="container">
<div id="swivel-card">...</div>
</div>
let container = document.getElementById('container');
let card = document.getElementById('swivel-card');
let swivel = new Swively(container, card, {
perspective: 25,
transition: 500
});
You can change a few parameters on the fly :
Sets the css perspective rule on the container element.
Lower values result in a bigger perspective effect.
Sets the css transform-origin rule on the inner element.
Sets the css transition-duration rule on the inner element, in ms.
Sets the swivel transform effect. The x value corresponds to the css transform rotateX rule, and the y is rotateY.
Resets the inner element to the default look, without a swivel effect.