SwiftUI: Learn Rotation 3D Effect with Anchors! ⚓️

Mark Moeykens
Oct 11, 2019
Earlier, you learned how to create a vector or line in which your rotation will revolve around. By default, this vector goes through the center of your view.
(Note: If you are new to Big Mountain Climber's Camp and want to see the previous blog posts, you can catch up here.)

How can you move this anchor to another part of your view?

When you set the axis parameter for your rotation3DEffect modifier, there is another parameter called anchor that you can set.

.rotation3DEffect(Angle(degrees: degrees),
                              axis: (x: 1.0, y: 0.0, z: 0.0),
                              anchor: .top)

The anchor is a UnitPoint type. This UnitPoint type has some pretty handy constants to move this anchor point around, such as:
  1. topLeading
  2. top
  3. topTrailing
  4. leading
  5. zero (default)
  6. trailing
  7. bottomLeading
  8. bottom
  9. bottomTrailing



You can also provide your own X and Y coordinates if you really want to customize the location of the anchor.

It's easy!

Next, you will learn how to combine and predict the effect of combining the X and Y axes ("axes" is plural for "axis" 😃).


Free SwiftUI Picture Book



Screenshots for every code example? Yes! Get your FREE SwiftUI picture book here.