Create perspective designs with 3D transforms

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
    11. Changes to XD Starter Plan
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids in XD
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups in XD
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components in Adobe XD
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects in XD
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lotties
      1. Work with videos in XD
      2. Work with Lottie animations in XD
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links in Adobe XD
    10. Preview designs and prototypes
    11. Create prototypes with videos in XD
  5. Share and export
    1. Share selected artboards
    2. Share designs and prototypes
    3. Work with prototypes in XD
    4. Coedit documents shared with you
    5. Create shareable links
    6. Review prototypes
    7. Work with design specs
    8. Share design specs
    9. Inspect design specs
    10. Navigate design specs
    11. Review and comment design specs
    12. Export design assets
    13. Export and download assets from design specs
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Share prototype from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents
      1. Issues with XD cloud documents
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

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

3D Transforms feature lets you simulate object depth and perspective in your designs with minimal effort. Combining the ability to rotate any object along its horizontal and vertical axis, and applying depth along the Z-axis, you can mimic visual 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

Ensure that you are familiar with design and prototype workflows in XD and these limitations.

  • You cannot edit the space for padding, stacks, and repeat grids on canvas for 3D transformed groups. 
  • You cannot drag and drop to reorder stack elements on the canvas. You can reorder elements only from the Layers panel.
  • 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.
  • Vector editing and object flipping is not supported for 3D transformed objects. 
  • 3D Transforms are not yet available in the SVG export/import workflows.
  • 3D Transforms cannot be applied to artboards, only to their content.
  • 3D Transforms are not yet supported in developer specs.
  • 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.

Simulate object depth and perspective

You can apply 3D Transforms to complex compositions such as scroll groupsrepeat gridsstackspadding. With 3D Transforms enabled, you can control the orientation of objects along  X- and Y-axes, and apply depth along the Z-axis.

To simulate a 3D effect, firstly enable 3D Transforms in the Property Inspector, then use the gizmo  icon to tweak the orientation, and finally apply depth to the design objects.

Enable 3D transforms

To enable 3D Transforms, select the required object and click the 3D Transforms  icon in the Property Inspector.

Enable 3D transforms

move the gizmo

New object controls appear in the Transform section and the gizmo  icon is available in the center of the current selected object. Move the  icon to the left, right, top, and bottom. 
You can modify the axis values in the Property Inspector or rotate the gizmo  icon to rotate objects along the axis.

Rotate objects along X or Y axis

After you enable the 3D Transforms  icon in the Property Inspector, follow these steps to tweak the object orientation along  the X and Y axis:

  1. Select the object you want to rotate. 
  2. Enter the orientation values in the Property Inspector or click and drag the gizmo  icon that appears at the center of the object.
  3. As you adjust the values, observe that the objects start to rotate along the required axis. 

Rotate the object around X axis

Rotate the object around X axis

Positions the selected object along the horizontal X axis.

Rotate the object around Y axis

Rotate the object around Y axis

Positions the selected object along the vertical Y axis.

Apply depth along 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 icon.
  3. The anchor icon appears and you can move the selected object up and down.

Things to watch out for

  • The 3D Transforms 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 resulting 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.

Video: How do I work with 3D transforms in XD?

"With 3D Transforms in Adobe XD, you can simulate object depth and perspective with just a few clicks on the design canvas" - Dani Beaumont, Principal Product Manager, Adobe XD.

Watch this video to learn how to work with 3D Transforms in XD.

Viewing time: 3 minutes.

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 with 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?

Ask the Community

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.

شعار Adobe

تسجيل الدخول إلى حسابك