ThemeKit Active

Perspective

Perspective along with a bottom box shadow helps to create the illusion of depth in a web page layout. Perspective is often expressed in pixels but using viewport width units works better on respnsive designs.
The lower the value for perspective - the greater the effect. A value of zero will remove it completely.
Image
The image shown above has anoptional caption and can be configured as a link. The image is inserted in two sizes for computer and smaller mobile devices andhas a lazy loading function.
The caption and/or the link icon can show on hover if required.
The animation settings are …

Checkbox to turn on animation
Animation time and delay set in milliseconds
Initial scale and perspective
Rotate on the X-axis , the Y-axis and the Z-axis with checkboxes to reverse the rotation direction

Example

The image above shows the caption and link icon on load. It has an initial scale of 0.65, it is rotated by 45° on the Y axis and the rotation is reversed .
The animation delay is set to 500ms and a time to 2500ms.

ThemeKit Active Perspective Image 1 — Animate Out
From Perspective

ThemeKit Active Perspective Image 2 — Optional Image Link

Two Images

The two column grid has adjustable relative column widths to suit the aspect ratio of the images.
Captions and links are optional and the caption and link icon can show on hover on computers if required.
The left image demonstartes a caption of two or more lines and the right image is an internal link.
The left image has an aspect ratio of 1:1. It has a perspective setting of 150vw and is rotated 45° on the Y-axis.
The right image has an aspect ratio of 4:3. It has a perspective setting of 100vw and is rotated -45° on the Y-axis.

Perspective Article

Both items animate in from perspective when the container enters the viewport.
The article has a heading, optional span, descriptibe text and an optional link.
Shadows
The all around box shadow switches to a bottom box shadow when the animation ends.

Hero

Perspective Article

The image has alt text, a lazy loading option and an optional caption, The caption can run to two or more lines, can be aligned horizontally and has controls for horizontal and vertical inset.
The article has a heading, styled spans, text and an optional internal link.
Animation
Both items have their own animation controls and can be animated as required. The items have the same animation controls as the perspective image described above.