Use pure CSS3 to implement a book with 3D Rotation

Use pure CSS3 to implement a book with 3D Rotation

Some cutting-edge e-commerce websites have begun to use 3D models to display products and support online customization. The presentation of books is the simplest,

Without complex Modeling Processes, you can use images and some CSS3 transformations to achieve better presentation results, which is simple and practical.

 

The 3D model of a book is the simplest of all products, because it is essentially a cube with a cover/cover and a left-side seal.

Therefore, to construct a 3D book display, the problem is broken down into a cube + rotation + image background.

1. Construct a cube

To create a cube, first create a virtual 3D visual space, which can be obtained by setting the perspective attribute of the package container element.

. Stage {width: 200px; height: 260px; perspective: 1000px; perspective-origin: center; // default value, negligible}

The code above places the element in a position (z-axis direction) Px away from the observation point and centers it up on the X/y axis. Next, we add a cube element and six sides (upper, lower, left, and back) to the package container element to use figure because textures are needed.

We need to determine the coordinates of each plane of the cube based on the book thickness and length and width. In this example, the absolute thickness of the Book Model (a MySQL book) is 18.2px, the height is 260px, and the width is 197.6px.

Based on the simple geometric knowledge, the distance between the front and the back of the cube is 18.2/2 = 9.1px, and the "back" element needs to be flipped (that is, "back" in the past ).

.front {    transform: translateZ(9.1px);}.back {    transform: rotateY(180deg) translateZ(9.1px);}

Using a similar calculation method, we can place the other four sides (translation + Rotation Transformation) to their respective positions to assemble them into a virtual cube.

.front {    transform: translateZ(9.1px);}.back {    transform: rotateY(180deg) translateZ(9.1px);}.top {    transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);    width: 18.2px;    height: 197.6px;}.bottom {    transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);}.left {    transform: rotateY(-90deg) translateZ(9.1px);    width: 18.2px;}.right {    transform: rotateY(90deg) translateZ(188.5px);    width: 18.2px;}

2. add a cover and then add a background image to the front, back, and left sides (you can use a picture and extract it from different positions). Then, add the background color to the other three faces, add the shadow effect to the "bottom" area:

.front {  transform: translateZ(9.1px);  background: url("//wow.techbrood.com/uploads/160301/mysql.png") top right;  background-size: auto 100%;}.back {  transform: rotateY(180deg) translateZ(9.1px);  background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left;  background-size: auto 100%;}.top {  transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);  background: #fafafa;  width: 18.2px;  height: 197.6px;}.bottom {  transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);  background: #ccc;  width: 18.2px;  height: 197.6px;  -webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));}.left {  transform: rotateY(-90deg) translateZ(9.1px);  background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center;  background-size: auto 100%;  width: 18.2px;}.right {  transform: rotateY(90deg) translateZ(188.5px);  background: #ddd;  background-size: auto 100%;  width: 18.2px;}

In this way, we have implemented a realistic 3D book visual model. 3. Add a rotation Animation

This is relatively simple. You can use the rotateY method.

@-webkit-keyframes rotate {    0% {        transform: rotateY(0) translateX(-18.2px);    }    100% {        transform: rotateY(360deg) translateX(-18.2px);    }}