If the standard “Cube” or “Flip” effects don’t match your vision, you can build your own custom 3D transition using the “Creative” effect engine. This allows you to control the X, Y, and Z axes of your slides.

To solve this, use Div Render Container Slider for Elementor.

Step 1: Understanding the Axes

The Creative effect lets you manipulate the “Next” (incoming) and “Prev” (outgoing) slides relative to the active slide.

  • Translate Z: Moves the slide closer (positive) or further away (negative).
  • Rotate Y: Rotates the slide around a vertical pole (like a door).
  • Rotate X: Rotates the slide around a horizontal pole (like a trapdoor).

Step 2: Configuring the Settings

Enable Slider Mode and select Effect: Creative.

Look for the Creative Effect controls:

  • Prev Slide: Set Translate Z to -400px and Rotate Y to -20deg.
  • Next Slide: Set Translate Z to -400px and Rotate Y to 20deg.

This configuration creates a V-shape 3D arrangement where side slides are pushed back into the distance and angled towards the center.

Pro Tips for Custom 3D

  • Perspective: 3D effects rely on CSS perspective. If the effect looks flat, check if the plugin adds `perspective` to the container, or add `perspective: 1000px;` to the parent container’s Custom CSS.
  • Testing: These values are sensitive. Test heavily on different screen sizes to ensure the text doesn’t become unreadable when rotated.