Looking for information on how to simulate 3D objects when creating immersive and interactive experiences in Adobe XD? You have arrived at the right place!

3D transforms lets you add design components in 3D spaces and adds a new dimension to your design objects.

By rotating any object along its horizontal and vertical axis, and applying depth,  you can mimic effects such as 3D animations, mockups in perspective, card flip interactions, and many more. 

Work with 3D transforms
Flip interaction created using 3D transforms

New to Adobe XD?

Get Free Trial App

Learn app basics

Already on Adobe XD?

Update Your App

Check out What's New

Try it yourself

Get Sample File

.xd; 13 MB

Before you proceed

Be familiar with these limitations before you apply 3D effects on your design objects:

  • When you convert a 3D transformed content into a main Component, it automatically resets to 2D.
  • You can override 3D transforms on component instances, but global edits are not possible from the main Component.
  • You cannot apply 3D transforms inside Components.
  • When you apply 3D transforms to hover or tap states, Transforms are applied to all states for that object.

  • You cannot edit the space for padding, stacks, and repeat grids on canvas for 3D transformed groups. 
  • You can reorder elements only from the Layers panel. You cannot drag and drop to reorder stack elements on the canvas.
  • When you rotate images in 3D, image degradation takes place for some images.
  • Shadows look slightly different on preview surfaces if objects from the composition have fixed objects on scrolling artboards, scrollable groups, or nested 3D transforms.
  • Size of 3D transformed objects does not change when you resize a group.
  • You cannot edit vectors and flip objects for 3D transformed objects. Also, you cannot apply 3D transforms for:
    • Developer specs
    • Artboards
    • SVG export and import workflows
    • Edit vectors.

Simulate object depth and perspective

To simulate a 3D effect, you need to first enable 3D transforms in the Property Inspector, use the gizmo  icon to tweak the orientation, and finally apply depth to the design objects.

Enable 3D transforms

You can apply 3D transforms to complex compositions such as scroll groupsrepeat gridsstackspadding, and on objects copy-pasted in 3D transformed groups. With 3D transforms enabled, you can control the orientation of objects along the X, and Y axis, and apply depth using the Z axis.

Watch this animated illustration to learn how to enable 3D transforms.

Enable 3D transforms
  1. Select the required object within the current session of your design.
  2. Click the icon in the Property Inspector. New object controls appear in the Transform section of the Property Inspector and the gizmo  icon is visible at the center of the selected object.

Rotate objects

After you enable icon in the Property Inspector, follow these steps to tweak the orientation of the objects using the X and Y axis:

  1. Select the object that you want to rotate either in the X or Y axis. 
  2. Enter the orientation values in the Property Inspector or click the gizmo  icon that appears at the center of the object. As you adjust these values, observe that the objects start to rotate around 3D axis. 

Watch this animated illustration to learn how to rotate objects along the X and Y axis.

Rotate the object around X axis

Rotate the object around X axis

Positions the selected object along the horizontal axis.

Rotate the object around Y axis

Rotate the object around Y axis

Positions the selected object along the vertical Y axis.

Apply depth using the Z axis

Now that you've learned how to enable 3D transforms and rotate objects along the X and Y axis, take a step forward and explore how to use the third dimension - the Z axis. 

When designing a stack of cards in perspective or creating card flip interactions, you can move objects on the Z axis to create a sense of depth for the layers. Watch this animated illustration to learn how to apply depth along the Z axis.

Move the object along Z axis
  1. Select the required object.
  2. Hover on the center point of the gizmo and move the selected object up and down.

Things to watch out for

  • The icon only shows or hides the controls and the gizmo. It does not help you create a 3D environment or disable transformations already applied within your design.
  • When you resize objects that have X or Y rotation, the Z depth value also changes automatically that might result in content reordering. For example, when designing a group of cards, in perspective, each card rotates at the same angle, but with different depth. If you multi-select those cards and choose to resize them, they will resize as needed. However, the Z value changes for each card and results in content reordering.

  • When you change the Z depth value for any object, XD does not support layer ordering methods such as Bring to Front, Send to Back, and reordering from Layers pane.

Tips and tricks

Now that you know how to work with 3D transforms in XD, here are some handy tips and tricks:

  • You can quickly reset the object back to its 2D state at any given time. Right-click the selected object and Reset 3D transforms. Or, you can use ⌥⌘T on macOS and Alt + Ctrl + T on Windows to reset 3D transforms.
  • You can choose to show or hide 3D transforms controls. Use ⌘T on macOS and Ctrl + T on Windows to show or hide 3D transforms.

What's next?

We've got you started on how to enable and use 3D transforms within your designs. Take a step forward and learn how to animate them, and share them with designers or stakeholders for feedback.

Have a question or an idea?

Have a question or an idea

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.