swively
A javascript class that adds a swivel hover effect to anything.
Installation
NPM
npm i swively --save
Yarn
yarn add swively
and then in your code, import it:
;
Usage
The element that will receive the swivel hover effect must have a dedicated container for this effect to work.
example:
...
let container = document;let card = document;let swivel = container card perspective: 25 transition: 500;
API
You can change a few parameters on the fly :
swively.setPerspective(amount)
Sets the css perspective rule on the container element.
Lower values result in a bigger perspective effect.
swively.setTransformOrigin(origin)
Sets the css transform-origin rule on the inner element.
swively.setTransition(duration)
Sets the css transition-duration rule on the inner element, in ms.
swively.setTransform(x, y)
Sets the swivel transform effect. The x value corresponds to the css transform rotateX rule, and the y is rotateY.
swively.reset()
Resets the inner element to the default look, without a swivel effect.