Member-only story
While I looking for some design references, I happened to see an image of Pantone’s plastic color chip sets commonly seen in design studios.
For those who are hasty, here’s the final view.
Then, let’s dive in!
How to rotate?
This can be implemented by using rotation3DEffect
To make it simple, let’s begin with the empty square. As you can see from the above GIF, rotation3DEffect make a view rotate around x, y, z axis. You can check details in the official document.
So what we have to do first is making our view to rotate around y-axis like real Pantone color sets. In addition, to make our view act more naturally, we should think about other options like anchorand perspective.
anchor should be placed in the position where the central axis is desired and perspectiveis used to adjust perspective literally. I set anchorto UnitPoint(x: -2, y: -1.5) because people are used to the top-down view. Okay. Now it seems the only thing we should do is just replacing Rectangle to a card shape.
However, before we jump into it, there is an unsolved problem we should deal with. That is, because of the feature of ForEach, zIndex of cards at the back is higher than card at the front, and so the card at the front is blocked by them. We will look into this issue in more detail at next part. In conclusion, this requires adjusting the zIndex of each card.
