Views 3D FlipBox (VVJF) renders each row of a Drupal Views listing as a two-sided card that flips on hover or click to reveal a back face, in vanilla JavaScript with no jQuery. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What it does
VVJF adds a Views style plugin called 3D Flipbox. The first field in your row becomes the front of the card; every other field becomes the back. Hovering or clicking — your choice — flips the card in 3D to reveal that back content. It is a genuine Views style plugin, so filters, sorting and the pager all work exactly as they would with any other display format.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3 or later |
| Package | VVJ |
| Core module dependencies | Views, Filter |
| Contributed dependency | VVJ Core — required, installed automatically |
VVJF 2.x requires VVJ Core. composer require drupal/vvjf:^2.0 installs it for you. A manual, non-Composer download needs VVJ Core downloaded and enabled separately — VVJF's flip behaviour is built on the custom-element rendering VVJ Core provides, and the module will not function without it.
Setting up your view
Row style must be Fields, with at least two fields. The first field can be any field type and becomes the front card; every field after it renders on the back. If the first field contains a link, VVJF disables its click behaviour via JavaScript so it cannot fight with the flip trigger — on hover, links on the front are disabled while links on the back stay active; on click, links on both sides are disabled unless the card has collapsed to a regular block on a small screen, in which case they re-enable.
Configuring the flip
- Flip trigger
- Hover or click.
- Flip direction
- Horizontal (Y-axis) or vertical (X-axis).
- Flip speed
- Animation duration, for example 0.6s for a smooth transition.
- Front / back background colours
- Independent colours for each face of the card.
- Perspective
- Tunes the 3D depth of the flip for a more or less pronounced effect.
- Available breakpoints
- Responsive breakpoints, or "none" to keep the flip active at every screen size.
- Box height and width
- Height and minimum width for each card.
On small screens the card can collapse into a regular, non-flipping block instead of forcing a flip interaction that does not translate well to touch — configure this through the breakpoints setting rather than disabling the module for mobile.
Features
- No jQuery. Pure vanilla JavaScript.
- 3D perspective control for the depth of the flip effect.
- Responsive collapse. Configurable breakpoints let the card fall back to a flat block on small screens rather than forcing a flip gesture on touch devices.
- Accessibility-enhanced. ARIA roles and properties give context to screen readers, keyboard navigation works without a mouse, and focus management follows the currently displayed side.
- Independent front/back styling, including separate background colours per face.
Custom tokens for view header and footer
Views header and footer fields set to Global: Text area or Global: Unfiltered text with "Use replacement tokens from the first row" enabled cannot resolve standard {{ title }}-style tokens. Use VVJF's own syntax instead: [vvjf:title], [vvjf:field_image], and so on. Append :plain to strip HTML — [vvjf:title:plain]. These pull directly from the rendered first row and do not support complex multi-token rewrites; use one token per field. In v2, resolution runs through the shared vvj_core.token_resolver service, with the same token syntax as v1.
Installation
composer require drupal/vvjf
drush en vvjf -y
drush crThen edit or create a view, set Row style to Fields with at least two fields, and under Format choose 3D Flipbox as the style. Set the number of items to display in the Pager settings.
Developer and site builder tips
- Every view using this plugin carries the CSS class
vvj-flipboxalongside Views' ownjs-view-dom-id. - A flipped card gets the class
flipped. - Hover and click classes are added to the main view element, and vertical/horizontal classes are added to each side, so you can target flip state and orientation directly in CSS.
- To use more than one field as the front card, mark the extra fields "Exclude from display" and combine them with a Custom Global Field (Text) using Views' replacement patterns, ordered before the visible fields.
- The Grouping Field feature in Views is not supported and should be avoided on a view using this style.
3D FlipBox or a carousel?
A flip card works best when you have exactly two states to show for each item — a summary and a detail, a question and an answer, an image and a caption — and you want the reveal to feel deliberate rather than automatic. If you have more than two pieces of content per item, or want continuous rotation through a larger set, Views 3D Carousel or Views Carousel fit better. If the content reads better as an expanding list than a flipping card, see Views Accordion. All four run on the same VVJ Core foundation.
Common questions
Does the card flip on hover or on click?
Either — it is a Format Settings option. Hover suits desktop-first designs; click is generally the safer default because it also works on touch devices without relying on a synthetic hover event.
What happens on small screens?
You control this through the breakpoints setting. Configure the card to collapse into a regular, non-flipping block below a chosen width instead of forcing a flip gesture on touch.
Does VVJF need jQuery?
No. It is vanilla JavaScript. It does depend on Drupal core's Views and Filter modules, and on VVJ Core.
Will VVJF work on Drupal 12?
Yes. It declares core_version_requirement: ^11.3 || ^12 and PHP 8.3 or later.
Can the front card be an image?
Yes. The first field can be any field type, including an image field, and it becomes the front of the card.
Need a hand?
VVJF is free and GPL-licensed, like all my contributed work. If you want a flip card styled to match an existing design, a build that goes beyond what Format Settings expose, or a Drupal 10 to 11/12 upgrade so you can run version 2, that is my day job.
Read about my Drupal services, see what a Drupal developer brings to a project, or get in touch.
