Pure CSS Implementation of 3D code (cube, dynamic stereoscopic picture book, flat sky)

The content of this article is pure CSS implementation of 3D code (cube, dynamic stereoscopic picture book, Flat sky), the code is very detailed, the need for friends can look.

First, Cube

I think the cube can be regarded as the basis of 3D image, the first cube is composed of six of the same surface, and then we need to construct in turn. (according to the body structure in the code)

The code is as follows:

<! DOCTYPE html>
Second, dynamic three-dimensional picture book

Design a picture book into a stereoscopic 3D effect

Make your atlas more beautiful with rotation, movement, tilt, and 3D effects.
The code is as follows:

(after the first position is fixed, it will be arranged in the following sequence) <! DOCTYPE html>
Three, the plane of the starry sky

The code is as follows:
(because there is no JS so there is only a flat effect
It's easy for you to master the center point of rotation.

<! DOCTYPE html>