- 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
- SVG export and import workflows
- Edit vectors.
Simulate object depth and perspective
You can apply 3D transforms to complex compositions such as scroll groups, repeat grids, stacks, padding, 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.
After you enable icon in the Property Inspector, follow these steps to tweak the orientation of the objects using the X and Y axis:
- Select the object that you want to rotate either in the X or Y axis.
- 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.
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.
- 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.
- 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.
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.