This 3D flip box WordPress build gives a card some showmanship. Instead of just sitting there, it turns in place to reveal a second side. It’s built from a few nested divs, one rotation, and a single hover interaction.
Build the structure
From the Add panel, add a Rows element inside your container. Drop in an Icon element and a Text element too. Rename the rows element to Front, since it holds the front-facing content.
Wrap the Front rows in a Div and rename it to Wrapper. This div will hold both the front and back sides together.
Wrap the Wrapper div in another Div and rename it to Flip. In the Style panel, set a width for it, for example 4 columns.
On the Flip container, set Perspective to 1000 pixels. Select the Wrapper and set its Transform style to Preserve 3D. This lets the elements inside rotate in three dimensions instead of flattening.
Style the front and back
On the Front rows, add the Back face visibility property under Style declarations. Set it to Hidden. Then set Aspect ratio to 1:1 so the box is a perfect square.
Set Border radius to one of your size variables, like the M variable. This gives the box rounded corners instead of sharp edges.
For Background, choose Image and gradient, then add an image from the media library. Layer a gradient on top of it, using one color stop set to a style variable like Secondary. Set the other color stop fully transparent, so the image stays visible instead of fading into a flat color.
Add padding around the content using a size variable, like XL. Then set Content X to Space between. This moves the icon to the top and drops the text to the bottom.
Switch the icon to an Icon box, open the icon library, and pick one that fits, like an arrow. Set its alignment to End so it lines up with the edge of the box.
Switch the text element to a Heading 4, then update it with your own title.
Duplicate the Front rows and rename the copy to Back. This keeps both sides visually consistent instead of building the back from scratch.
On the Back copy, update the icon’s color and background color, for example to an Accent hover variable. Then replace the front’s image-and-gradient background with a plain background color.
If the back side’s colors still look off, switch its mode, for example from dark to light. Style variables can carry different values per mode.
Position and rotate the back side
Set the Back copy’s position to Absolute and anchor it to the top left. This stacks it directly on top of the front instead of pushing it down.
Add a rotation on the Y-axis of -180 degrees to the Back copy. This flips it out of view, so the front shows by default instead of the back.
Add the hover and reverse interaction
Select the Flip container, then open the Interaction tab. Target the Wrapper div with a new Hover interaction.
Set the action to Rotate Y and set its value to 180 degrees. Shorten the duration too, if you want the flip to feel snappier.
Duplicate the hover-in action and change its value back to 0 degrees. This rotates the box back to the front the moment someone hovers out.
Result
The box shows its front side by default. On hover, it flips smoothly to reveal the back. It rotates back the moment the visitor’s cursor moves away.