Rotate Two Images
The ThemeKit Active Rotate [2] widget shows an image on page load. It then rotates and shows another image on the backface.
Images
Bothe the front face and the backface images are inserted in three sizes for the various devices. The images in the demo were sized to 960 x 640px, 720 x 480px and 540 x 375px and optimised before importing into EverWeb.
The large and meduin images have the same aspect ratio and the image for phones in porttrait mode has a portrait aspect ratio.
An intrinic aspect ratio is used to create the container so that it is responsive so the width and height of both the landscape images and the portrait image are entered into the widget settings.
Animation
The rotation animation has controls for time and delay set in milliseconds and the rotation can be reversed by checking a box.
Since adding perspective causes the rotating image to overlap the container's boundary the scale can be reduced and/or top and bottom padding added to compensate. Both the perspective and the top/bottom padding use vmin (viewport units} since the item is responsive.