To make such a simple 3D navigation bar, you need to know the following knowledge:
1. Space conversion:
From the perspective of the coordinate axes, in addition to the well-known X and Y, it will also form a three-dimensional space with the Z coordinate axis, and the position of the Z axis is the same as the direction of our eyes.
The property of space transformation is still transform , so you can add space translation, rotation, scaling and other effects to it.
2. Space transformation - translation: 
In the default state, setting translation for the Z axis has no effect, because the computer is a plane, and the translation effect of the Z axis opposite to our line of sight cannot be observed by default, so we have another knowledge.
3. Perspective:
It is equivalent to specifying the distance between the user and the computer screen . This will produce a near-large and far-small visual effect ( also known as perspective effect , which means that we want to translate the z-axis , then the direction of the z-axis is the human eye To the direction of the computer screen, if you give a positive number, it will move towards the direction of our human eyes, and it will produce a "near large" effect; otherwise, if you give a negative number, it will be far away from our human eyes, and it will produce a "far smaller" effect . )
Demo:
As above, add the viewing distance attribute to the parent .father and then set the translation attribute of the Z axis (the positive number becomes larger, and the negative number becomes smaller)
Note: The viewing distance attribute must be added to the direct parent. The recommended value is between 800 and 1000.
4. Space conversion-rotation: Plane rotation is to rotate along the center point of the picture, then the rotation of space is to rotate along the center point in the Z axis , that is, the center point of the distance from the human eye to the screen, so the rotation effect of space The rotation effect of the plane will look the same.
The following demonstrates the rotation effect of the picture along the X, Y, and Z axes by taking positive and negative values: (The Z-axis rotation effect looks the same as the plane rotation)
The positive and negative values of the rotation direction can be judged by the following method:
5. Three-dimensional rendering of space - transform-style: You can build a cube in the computer, the default value of the attribute transform-style is flat, just set the value to preserve-3d.
Stereo rendering steps:
1. Add attributes to the parent element 2. Position the child 3. Adjust the position with rotation and translation
Sequential presentation :
There are two boxes in the parent box. The first step is to set the three-dimensional attribute of the parent box to transform-style: preserve-3d;
The second step is to locate in the parent box (the child is separated from the father) . The third step is to set the front and rear distances between the two child boxes on Z axis to produce a three-dimensional effect. When our human eyes move, the second sub-box moves away from our human eyes to produce front and rear effects . Finally, set the mouse to hover and rotate the whole box to see the effect.
Create a 3D navigation bar below
Similar steps as above:
Set the three- dimensional rendering property of the parent element of the two child elements, and then position the two child elements on the parent element so that they overlap first , then set the orange box to rotate 90° separately, and then let it translate half of the box upwards, so that it Make it the top of the cube, and finally move the green box forward by half of its height to make it the front of the cube, and then set the rotation effect of each box li element . These are translations and rotations on the Z axis , and both boxes have independent coordinate axes and do not affect each other.
Demo:
