Flip Cards

Like the other Stack 3 widgets, the cards are inline on wider screens, switch to two on top and one centerred on the bottom below the break point and then line up vertically on mobile phones in portrait mode.
Each card has an image and overlay caption on the front face and a heading text and optional link on the back face.
The front face shows a flip icon at the top right when viewed on touch devices. This can also be shown on computers if the "tilt" animation is not used. It is not strictly necessary since the cursor type on hover is set to "alias" which is a curved arrow.
Animation
The flip animation is created using CSS with just one line of Javascript to create the toggle action. CSS transform is used to rotate the item through 180° on the X-axis on click.
The hover animation simply rotates the item through 20°.
Images
The images all need to have the same size and aspect ratio. The ones used in this demo are 480px x 360px.
Most flip cards of this type require a container fixed width and height.
Since a fixed size is useless here, they use a tricky CSS calculation to make them responsive. The width and height are calculate as percentage values and this requires the image width and height to be entered into the widget settings.
Backface
This has a centered text block with a heading and a paragraph. The optional link can be configured to open internal or external pages using a relative or absolute file path and have a new window option. Follow the link below to find out more about the different types of file path.
Kind Of Funky
When adding the backface content, the items will look kind of odd as the backface items are displayed upside down over the image. Needless to say, all will be well on the published page!
Grid
If more flip cards are required, there is a grid version which will accept up to 48 items.