It's easy to use CSS Transform Rotate, and make it rotate inside of a 3D scene. However, we can't use this to make objects rotate in the real depth of the scene, as there is no displacement on the depth axis.
The purpose of this experiment is to make elements move along a curve while moving them on the z-axis.
We can animate element going forward and backward along the z-axis.
In order to avoid collision, we proceed in 3 steps: first move the objects away from each other on the x-axis, then move them along the z-axis to swap their position, then push them back to the center.
Instead of a step by step animation, we can achieve a smooth, uninterrupted and curved motion. However, as it's done using easing functions, we have to break down this motion in 2 seamless steps. Each step is a superposition of 2 motions, one set to ease-in and the other to ease-out, in order to achieve a curve and not a straight line.
Superpose 2 motions at the same time to simulate an arcHere is the same motion, doubled to make a 180° arc, applied to our 3D scene, this time set on axis x and z.
Swap positionFull rotation