Rotate

object

options.rotate specifies the rotation elements have prior to being revealed.

Default Value

{
    rotate: {
        x: 0,
        y: 0,
        z: 0
    }
}

Accepted Values

Key values should be a number describing an angle in degrees.

CSS Transforms are preserved. For example, if your element already has 45° of Z‑rotation and you specify options.rotate { z: 20 }, your element will initialize with 65° of Z‑rotation and animate back to the computed value of 45° when revealed.

Usage

ScrollReveal().reveal('.flip', {
    rotate: {
        x: 20,
        z: 20
    }
});

When using X or Y rotation, remember to add the Perspective CSS property to a parent element. It is not required, but creates more compelling 3d rotations.