swively

A javascript class that adds a swivel hover effect to anything.

Installation

$3

npm i swively --save

$3

yarn add swively

and then in your code, import it:

``js
import Swively from 'swively';
`

$3

The element that will receive the swivel hover effect must have a dedicated container for this effect to work.
example:

`html



`

`js
let container = document.getElementById('container');
let card = document.getElementById('swivel-card');
let swivel = new Swively(container, card, {
perspective: 25,
transition: 500
});
`

$3

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.