preface

Winter vacation is a good season to read, so do a small book to supplement the knowledge effect is as follows:

implementation

Create a page

We need to combine two pictures into one that has both sides. So here we have to flip the tails along the Y-axis to get it right. useThe transform: scale (1, 1)Originally, the picture on the left was a frontal view, and the picture on the right was a reverse view

idea

  1. Two images are superimposed by positioning when combined into one.
  2. Reverse the whole image to see both sides of the page
<div class='merge'>
          <img src="https://static-zh.wxb.com.cn/karazhan/content/article/2020/1/16f8334cdef.jpg" />
          <img src="https://static-zh.wxb.com.cn/karazhan/content/article/2020/1/16f82fce679.jpg" />
</div>  
Copy the code

The practical effect is that no matter how many angles you rotate, you can only see figure 2 because figure 2 is always higher than Figure 1.

1. First set the parent level to 3D 2. Then move the Z direction of Figure 1 1px, which represents the distance from the user. Originally, the Z direction of Figure 1 and Figure 2 is the same, but the level of Figure 2 is higher, so you can see Figure 2. Now move figure 1 1px forward, and you can naturally see Figure 1.

.merge{ position: relative; transform-style: preserve-3d ; transform-origin: left center; } img{ width:200px; height: 300px; position: absolute; top:0; left: 0; background-color: #fff; &:nth-child(1){ transform: translateZ(1px); }}Copy the code

Why not use z-index to change the hierarchy is, since the two images are still on the same hierarchy, no matter how the image is flipped, one image will always overwrite the other. So we also have to switch their z-index hierarchy, which is really messy. While translateZ is a hierarchical relationship that the user sees successively, so the image in the back will be flipped to the front when flipped.

Single page demo complete code

Make more pages

Multi-page flipping has hierarchy issues, and it still shows only the last set of images because it has the highest hierarchy.

The solution is to make it clear that the first image on the right (the one about to turn the page) must be displayed at the top, while the image on the left (the flipped image) shows the last image to achieve the desired effect.

  1. When there are multiple pages, we generally use the traversal method. We only need to raise the z-index of the page to be flipped to the highest, so as to realize the problem of the flipped image hierarchy on the right. And the one on the left itself the last one is going to be higher, so we don’t have to set anything.
<div className="page-wrap"> {list.map((item,index)=>{return <Merge {... item} isSelected={selectedIndex===index} rotateY={selectedIndex<=index ? / > 0: rotateY}})} < / div > / / merge components render () {let {rotateY, left, right, an isSelected} = this. Props return < div className='merge' style={{transform:`rotateY(${rotateY}deg)`,zIndex:isSelected? 99:0}}> <img src={left} /> <img className="image" src={right} /> </div> }Copy the code

Problem found when the sub-item is directly for the picture, it is necessary to set background or border for the picture to make the effect of 3D changing the level effective. This problem does not occur when an icon is wrapped around a div. I set div to inline/inline-block and this doesn’t happen. So far we don’t know why?

Multi-page demo complete code

Advanced infinite page-turning effect

Imagine a book with hundreds of pages. We need to create a DOM for a page. Can we try to do this with the least DOM structure? Try to use three pages to simulate the browsing effect of a whole book.

idea

  1. The whole process of turning a book is analyzed by the following diagram which I divide into three parts: left, middle and right

2. When the middle page is flipped to the left, the left page is flipped back to the right, and the right page is flipped to the middle page, so as to achieve the circular flipping effect of three pictures.

Problems to be solved

  1. The flip effect is throughtransform:rotateY(deg)To control, through the control of the whole Angle to achieve the page turning effect
  2. Transitions are required to flip from the middleware page to the left, while transitions are not required to flip from the left to the right
  3. The hierarchy problem, set the middle page to the hierarchy as the three highest, the reason why choose three pictures to simulate the effect of the whole book, also because the three pictures flipped when the hierarchy problem is easier to solve.

plan

  1. Again, separate each page into components. The basic code is as follows
Function Single (props){let {position,left,right} = props let rotateY = 0 let zIndex = 0 let durAction = 0  let isLeft = position === 'left' let isMiddle = position === 'middle' let isRight = position === 'right' if(isLeft){ rotateY = 180 } if(isMiddle){ zIndex = 99 } if(isLeft||isMiddle){ duraction = 1 } return <div className='merge' style={{transform:`rotateY(${rotateY}deg)`,zIndex,transitionDuration:duraction +'s'}}> <img src={left} /> <img className="image" src={right} /> </div> }Copy the code
  1. Control the position of the page, initialize the data as follows, left/middle/right represents the left page/middle page/right page respectively
Constructor (){super() this.state = {constructor(){super() this.state = {constructor(); // manage positionList positionList:['middle','right','right'],}}Copy the code
  1. When we click on the next page, we need to change the positionList position values middle->left, left->right, right->middle
/ / find need middle page index let rightIndex = this. State. PositionList. FindIndex (item = > item = = = 'right') / / find the index of the left page LeftIndex = this. State. PositionList. FindIndex (item = > item = = = 'left') / / find the middle pages of the index let middleIndex = This. State. PositionList. FindIndex (item = > item = = = 'middle') let path = "/ / will be left page flip the if (leftIndex! ==-1){this.state.positionList[leftIndex] = 'right'} ==-1){this.state.positionList[middleIndex] = 'left'}Copy the code

The test followed our expected logic and found that the left page had moved to the right before the middle page could be flipped over. We need to delay the left flip to action. But rollover is controlled by rotateY, which is passed by the parent props, not the child components. Thought of a way is to locate a picture in the left position, the address of the picture and the address of the left picture keep the same, each click on the next page dynamic modification. Here we’re just flipping the same three images indefinitely, and we need to add new images as we flip them.

Add a new page to facilitate analysis with 0/1/2 representing the left/middle/right page. So in the initial state we set 122 which is one middle image and two images on the right, to see when we need to add a new image 122 we don’t need to replace image 012 we don’t need to replace image 201 we need to replace image, because it’s the same as the first page of the beginning, We need to update the first page to the data to generate the new page.

Unlimited page flipping complete demo

The last

By manually turning the page 📖 effect, and can be happy to learn more about CSS. At the beginning, I wanted to make this effect a little confused, but I found that it would be more effective to document my ideas before development and solve them one by one. The following is a list of ideas to comb through during the implementation process to help you solve the problem step by step.Feel free to leave your opinion in the comments section if you have a good way to implement the animation effect.