Use pure CSS3 to achieve a 3D rotating book

Some of the leading e-commerce sites have begun 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 pictures and CSS3 can be used to achieve better presentation, simplicity and practicality.

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

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, which 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 on 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>

Next, we add a cube element inside the package container element, 6 edges (up and down and back and forth), and the reason for using figure is that the map needs to be supported.

We need to determine the coordinate position of each plane of the cube according to the thickness and width of the book, in this case the book model (a MySQL book) has an absolute thickness of 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, where the "back" element needs to be flipped again (i.e. "back").

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

With a similar calculation, we can put the other 4 edges (translation + rotation transformation) to their respective positions, thus assembling 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 cover then we add a background image to the front and back and left side elements (you can use a picture and then intercept it from a different location), add 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;    width:18.2px;    height:197.6px;   -webkit-filter:drop-shadow (0 0 2 6px rgba (0, 0, 0, 0.75));}. Left {    Transform:rotatey ( -90deg) Translatez (9.1px);    Background:url ("//wow.techbrood.com/ Uploads/160301/mysql.png ") Top center;  &NBsp 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 a 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);    }}

The final is as follows:

You can try it yourself on the Internet (http://wow.techbrood.com/fiddle/17587).

by Iefreer

Use pure CSS3 to achieve a 3D rotating book