Use pure CSS3 to achieve a 3D rotating book

Some of the leading e-commerce sites have started to use 3D models to showcase products and support online customization, and the display of books is the simplest one,

No complex modeling process is required, and some transformations of images and CSS3 can be used to achieve better presentation, simplicity and usefulness.

The 3D model of a book is the simplest of all goods. Because it is essentially a cube. Only with cover/back and left side seals.

So to construct a 3D book display, the problem is broken down to construct a cube + rotate + picture background.

1. Construct a cube

To create a cube. First we need to create a virtual three-dimensional visual space. This can be obtained by setting the perspective property of the package container element.

. stage {    width:200px;    height:260px;    perspective:1000px;    Perspective-origin:center center;//default value, can be ignored}

The code above places the element at 1000px from the Observer point (z-axis) and is centered upward in the X/Y axis.

<div class= "Stage" >    <div class= "Cube" >        <figure class= "Back" ></figure>        < Figure class= "Top" ></figure>        <figure class= "Bottom" ></figure>        <figure class= "left "></figure>        <figure class=" right "></figure>        <figure class=" front "></figure >  </div></div>

Then. We add a cube element to the package container element, 6 edges (up and down and back and forth), using figure. is due to the need to support stickers.

We need to determine the coordinate position of each plane of the cube according to the thickness and width of the book. The absolute thickness of the book model (a MySQL book) used in this example is 18.2px. Height 260px. Width 197.6px.

According to the simple geometrical knowledge, the distance from the center of the cube to the front and rear faces is 18.2/2=9.1px, in which the "back" element needs to be flipped again (i.e. "back").

. Front {    Transform:translatez (9.1px);}. Back {    Transform:rotatey (180deg) Translatez (9.1px);}

Use a similar calculation method. We can place the other 4 edges (pan + rotate transform) to their respective positions. and assemble it 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. Join the cover then we add a background to the front and back and left side elements (can use a graph and then intercept from different positions), adding a background color to the other 3 faces. and add a shadow effect to the bottom face:

. 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;?? wid th: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;} 

This allows us to achieve a realistic 3D book visual model.

3. Add Rotation animation

This is relatively simple and can be used with the Rotatey method.

@-webkit-keyframes Rotate {    0% {        transform:rotatey (0) TranslateX ( -18.2px);    }    100% {        Transform:rotatey (360deg) TranslateX ( -18.2px);    }}

Finally for example the following:

Can you try it yourself on the Internet? (http://wow.techbrood.com/fiddle/17587).

by Iefreer

Use pure CSS3 to achieve a 3D rotating book