This tutorial builds a box that turns over to reveal a second face, with real paragraphs on both sides rather than two lines of text.
Front and back are paragraph fields
Front Content and Back Content are both unlimited paragraph reference fields with no bundle restriction. Put an image on the front and a card, a link list or formatted text on the back — or stack several paragraphs on one face. That is unusual for a flip box and it is the reason this bundle is worth the install.
Two settings, and both are required
- 3D Box Height takes a whole number of pixels. It is applied to the box as an inline height so that the two faces occupy exactly the same space and nothing jumps mid-turn.
- Flip Box (Horizontal Or Vertical) picks the axis. Read the labels carefully when you configure it: the stored value
flip-xis labelled Flip Box (Vertical) andflip-yis labelled Flip Box (Horizontal).
Entirely CSS, no script file
The sub-module's library declares a stylesheet and nothing else. The turn is done with a 1500px perspective on the outer box, transform-style: preserve-3d on the inner wrapper, a 0.8 second transform transition, and a 180 degree rotation on the chosen axis. No script means nothing to reattach after an AJAX update and no behaviour to debug.
See the W3CSS Paragraphs module page for every bundle you can place on a face.
Core support and the Views option
The info file permits Drupal 10, 11 and 12. If the faces should come from a View instead of being authored, Views 3D FlipBox covers that, with a floor of Drupal 11.3.
If your project needs a custom bundle or module rather than a stock one, Drupal development services covers it, and recent projects show the range.
