Three dimensional dice realize 3D cool rotation effect (with complete source code) (with animation code)

The whole idea ： First, build the cube of the dice

1. First build the front and back surfaces (front and back), By positioning （ The son is the father ） Position the two boxes on the front of the cube , At this time, one side obscures the other , Add transform-style: preserve-3d; achieve 3d Stereoscopic effect , Put the front box along z The axis moves half the distance in the positive direction , Back box edge z The axis moves half the distance higher in the negative direction , The front and rear boxes are built , Collocation hover And transition to see the effect ;

2. Left and right boxes and steps 1 similar , However, the left and right boxes need to move left and right for half the distance , And need to bypass Z Shaft rotation ;

3. It is similar to the construction of left and right boxes , Need to go around X Shaft rotation , Need along Y Axis up and down

4. Add dice points on each side , stay front Noodles , to front New addition display: flex;（flex Layout ） justify-content: center;（ The spindle is centered horizontally ）align-items: center;（ The side axis is centered ）, The sub box is point, At this time in front In the middle of the face ;

5. stay back Noodles , Set the number of points to 2： to back add to flex Layout , Set up align-items: center;（ The side axis is centered ）,justify-content: space-evenly;（ Elastic container 、 The gap between the elastic boxes is equal ）, stay back Put two in point Just a box ;

6. stay left Face settings 3 spot ：3 Each point can be divided into three boxes , to left add to flex Layout , The box above can be used justify-content: flex-end; Align the top right , Middle box centered justify-content: center;align-items: center;ÿ