ThemeKit Images

Perspective

ThemeKit Perspective Image
Perspective

Perspective

The ThemeKit IMG Perspective widget rotates the image on the Y-axis, reduces the scale and then returns it to zero on hover.
The effect can be removed for mobile devices if required but will still work on click.
The image is inserted in two sizes and has a lazy load option. It has a caption and options for a border and/or a box shadow.
The controls used for the effect are …

  • Transform translate on the Y-axis
  • Reduce scale lower than 1.0
  • Transform translate on the X-axis
  • Switch effect direction
  • Set the perspective in viewport width units

Editing

At the time of writing effects like this cannot be seen on the EverWeb design canvas so any changes need to be previewed in the browser.
The translate on the X-axis is used to compensate for the horizontal shift on rotate to center the image.
The value for perspective is reduced to increase the effect and zero will remove it. The default value of 150vw is a good starting point.
The example above is rotated by 15% on the Y-axis, translate by +5% with an initial scale of 0.85, perspective set to 150 and an animation time of 1200ms

ThemeKit IMG Perspective 1
Image [1]
Left
ThemeKit IMG Perspective 2
Image [2]
Right

Perspective [2]

The ThemeKit IMG Perspectibe [2] widget is shown above denonstrating the animation removed on mobile devices and showing how the caption can run to two or more lines.

Menu