How to rotate a 2D image in 3D online.

FrameTilt is a free browser-based perspective image tool. It places your image on a flat plane in a 3D scene, lets you adjust the angle, and exports the result as a polished PNG.

Step 1: Open the app and add an image

Open the FrameTilt app. Click the add-image area in the left panel, or drag and drop any image file onto it. You can also paste an image directly from your clipboard with Ctrl+V (or Cmd+V on Mac). FrameTilt accepts PNG, JPG, WebP, and most other common image formats.

Your image never leaves your device. All processing runs locally in the browser.

Step 2: Choose single or stack mode

At the top of the left panel, choose between Single and Stack mode.

Single mode shows one image at a time and is the fastest way to rotate a 2D image in 3D online. Use it for product shots, UI screenshots, or any image where you want a clean perspective effect without additional layers.

Stack mode layers up to four images with configurable depth, spread, and direction. It is suited for showing multiple screens together, feature comparisons, or richer product story visuals.

Step 3: Apply a preset or adjust manually

The Presets section offers three starting points: Hero, Subtle, and Stack. Each one sets all parameters at once, including rotation angles, camera distance, field of view, and background colors. Apply a preset and use it as a base to fine-tune from there.

To adjust manually, use the sliders in the Rotation section:

• Pitch tilts the image forward and backward (X axis).
• Yaw rotates it left and right (Y axis).
• Roll rotates it around the center (Z axis).

The Framing section controls zoom and positioning. Open Advanced framing if you want to adjust camera distance or field of view. A narrower FOV gives a flatter, more telephoto look; a wider FOV gives more dramatic perspective distortion.

Step 4: Fit the image to the frame

After changing angles, click the Fit button in the preview area. FrameTilt measures the projected bounding box of the image in the camera view and scales and centers it to fill the export canvas. One click is enough.

Step 5: Set the background

The Background section in the left panel has two color pickers: one for the top of the gradient and one for the bottom. Click either swatch to open a color picker, or type a hex value directly into the input field.

If you want a transparent background, enable the Transparent background toggle. The exported PNG will have no background layer, which is useful when you are dropping the image into an existing design.

Step 6: Add a shadow (optional)

Use the Shadow section to enable a soft shadow and adjust its opacity and softness. The shadow is rendered directly onto the canvas, so it is included in the export.

Step 7: Export

Click the Export PNG button in the preview area. FrameTilt renders the scene at 2400x1500 pixels and downloads the file to your device. The exported image is ready for use in product pages, launch posts, changelogs, slide decks, or anywhere else you use visual assets.

Tips

• You can save and restore all settings using the Export settings and Import settings options in the Settings section. This is useful when you want to apply the same perspective treatment to multiple images.
• In stack mode, the Stack direction slider controls the angle at which images are offset from each other. Combined with the spread and depth sliders, this gives fine control over how the stack fans out.
• Mouse wheel zooms the preview. The Fit button resets zoom and centering.

Ready to try it? Open FrameTilt.