preface

I often use netease Cloud Music, and when I see its home page rote picture, I want to realize one myself. This paper will realize 3d rote effect through animation combined with PERSPECTIVE and other CSS attributes. Let’s get started!

steps

To get started we’ll use three images and define the basic HTML and CSS structure as follows:

  1. We set the width of the image to 329px and use left and right to highlight the middle imageThe transform: scale (0.8), and then scale the images on both sides by 0.8. All we need to do is make the images move to achieve the effect of rotation.
  2. In order to achieve the 3d effect, the introduction oftransform-style 和 perspectiveThese two concepts

Next, analyze how to achieve these two points.

move

Choose Animation to write animation

To animate an animation, you can use either a CSS animation or a JS requestAnimationFrame. I chose animation as the means of implementation.

Analyze the stages of movement

If you just look at one diagram and the period is divided into three phases on the left, in the middle, and on the right, assuming we stay at 2s in each of these phases, it takes 6s to complete the period. To make the transition more natural, allow 0.5 seconds for each transition. So the total transition time is 1.5 seconds and the total time is 7.5 seconds

Animation using

  1. Use translateX to move the X-axis position of the image
  2. Animation-delay supports negative values, for exampleAnimation: three-d 7.5s ease-5s infinite;Since the animation-delay is set to -5s, the animation has moved for 5 seconds, which is 66% of the animation progress.
Transform: translateX(230.3px) scale(0.8); z-index: 1; } /* The transition time is 0.5s */ 34%,61%{z-index: 2; The transform: translateX (98.7 px) scale (1); } /* the transition time is 0.5s */ 68%,95%{z-index: 1; The transform: translateX (32.9 px) scale (0.8); } /* the transition time is 0.5s */ 100% {z-index: 1; The transform: translateX (230.3 px) scale (0.8); }}Copy the code

Set 3d effect

Give the parent of their images a 3d view. More attributes can be explained by Xuxin Zhang’s CSS3 3D article

  transform-style: preserve-3d;
  perspective: 800px;
Copy the code

After using this attribute, we can change the value of translateZ in the left, middle and top three positions of the image to achieve 3d effect. In fact, translateZ means to change the distance between the image and the user. We have achieved the same effect by scale(0.8). Because it’s close to the user, it’s supposed to be bigger. In addition to changing the user’s distance, we also added some custom attributes such as the rotateY Angle of the image to achieve the effect of opening the screen. You can add them according to your business needs.

Full Demo address

Hierarchy problems

When there are more than 3 rounds of graph, take four for example, the period of a graph needs to be divided into four stages. In each of the four stages, 3,4 means they are in the same position, and they stay for 2s in each stage as before. The total stay time is 8s. 1-2,2-3,4-1 requires a transition time of 0.5s. The final time is 9.5s.

The method I adopt is to set opacity of the picture to 0 when it reaches the fourth stage, so the last picture will not cover the previous one even when it reaches the fourth stage.

| | | | | | | | | | | | | | | | | | | z-index: 3; } /* The transition time is 0.5s */ 26%,47%{z-index: 4; The transform: translateX (98.7 px) scale (1); } /* The transition time is 0.5s */ 51%,73%{z-index: 2; opacity: 1; The transform: translateX (32.9 px) scale (0.8); Opacity: 0;} /* Opacity: 0; z-index: 1; The transform: translateX (32.9 px) scale (0.8); } /* Opacity: 1; z-index: 1; The transform: translateX (230.3 px) scale (0.8); }}Copy the code

Round broadcast graph hierarchy problem solving demo source

The last

CSS is used to realize the effect of netease cloud music rotation. If you want to interact with the rotation chart, the property of animation-play-state will be used. If the business needs it, it can be added. Finally, there is a good way to achieve the 3D rotation chart in the comment area.