Logo

EverWeb Widgets

Perspective [2] 3D Effect

ThemeKit 3D 2 Images Left
Left Image
ThemeKit 3D 2 Images Right
Right Image

Perspective

The CSS perspective property helps to give items a 3D effect when combined with rotation on the Y-axis.
Adjust
When an image is manipulated like this it overflows its container so there is a slider to reduce its scale by an appropriate amount. Depending on whether the image rotation id positive or negative the image will be moved to the left or right of its container so a slider is used to add a positive or negative percentage value to bring it back to the center.
Reverse
As can be seen from the example below, either or bot images can have can have the perspective reversed by checking a box.
EverWeb Design Canvas
At the time of writing, EverWeb cannot replicate the perspective effect so the page must be previewed in the browser to see the effect of changes to the widget settings.
Options
The optional caption is centered at the bottom of the image and the box shadow has controls for color and radius The shadow width settings on the X & Y-axis have checkboxes to reverse their direction.

ThemeKit 3D 2 Images Left
Left Image
ThemeKit 3D 2 Images Right
Right Image

Perspective Info

The perspective property is used to give a 3D-positioned element some perspective.
Perspective is added to the parent container and has a value in pixels. The lower the value - the more the effect.