This video shows how to split each View row into a front and a back, and have the card flip between them in 3D on hover or click.
Splitting a row in two
There is no "front field" and "back field" setting. Instead you add a field whose rendered output is <div class="vvjf-separator"></div> and place it in the middle of your field list: everything above it is the front face, everything below it is the back. That single marker is the whole mechanism, and it is why the Fields row style is required.
What you configure
- Dimensions Settings: Box Height (in pixels) (250 by default), Box Min Width (px), Grid Gap (px) (16) and Perspective (1000), which is how deep the 3D scene feels.
- Behavior Settings: Flip Trigger is Hover or Click, and ships set to Click; Flip Direction is Horizontal (Y-axis) or Vertical (X-axis), and ships set to Vertical.
- Style Settings: independent Front Side Background Color (#f0fbff) and Back Side Background Color (#b8e7ff).
- Animation Settings: Flip Speed (seconds) between 0.1 and 2, default 0.9, with five easing curves.
- Responsive Settings: Available Breakpoints for Flipbox — all, 576 (the default), 768, 992, 1200 or 1400 px.
What happens below the breakpoint
This is the part worth pausing on. Under the chosen viewport width the flip is switched off and both faces are shown stacked, with every nested element returned to the tab order. Above it, aria-hidden and tabindex are kept in sync with the flipped state so a keyboard user never lands on a face they cannot see. A throttled resize handler keeps that state honest when the window changes.
Compatibility
The vvjf.info.yml file declares ^11.3 || ^12 for core and 8.3 for PHP. Beyond core Views and Filter it requires VVJ Core, which supplies the custom-element base class this flip box extends.
Where next
The Views 3D FlipBox module page carries the full reference. For the scoping idea that makes each card query only its own DOM, see Scoped vs. Global Selection in JavaScript.
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.
