It all started in another article I wrote two days ago, when I… This is the link to the article: you are all spoiled by Vue ~ can go to see, I think the comment section is much more wonderful than my article itself, I regard it as everyone’s affirmation of me, porcelain is also a kind of ability is not ~

But there are still friends who know what they are worth. In fact, to be honest, if writing an article can help just one person, I feel very satisfied.

But there’s one thing that needs to be said:

  • Although I hold the Title of opening class bar, in nuggets this free platform, my speech only represents myself. I am just the least competent member of the team, so I write some articles to improve myself.
  • In addition, I think there is no shame in learning, and we are working hard to change the image of training institutions in people’s minds
  • Let’s get back to 3D

First take a look at 3 d

In the last article, I mentioned that you can use 3D to deal with the rotation of many pictures

3D is relatively simple, as long as you understand the three axes X, Y and Z, there is basically no problem. Another is the depth of field. Frankly speaking, if YOU want to use 3D on a page, you must establish a depth of field space: perspective

Such as:

  body{
      perspective: 1000px;
  }
Copy the code

So we can create a depth of field on the page, and once we have that, we can make some 3D changes on the page and it will look like 3D. So CSS transformations, 2D transformations, you know transform, transform,rotate, 3D transformation is just one more Z-axis: translateZ, rotateX,rotateY, etc.

If I were to use the color block as our display, then I’ve drawn the X,Y, and Z axes here

So with that in mind, what’s the difference between the rotation of the three axes

X:

Y:

The Z axis:

[translateZ] [translateZ] [translateZ] [translateZ] [translateZ] [translateZ] [translateZ]

This is the complete box code can also be click here to see the effect of oh, but since the use of github address, so not necessarily open

The first step is to make the image into a circle, which is almost like a square. If you remove the top and bottom, it becomes a circle.

Spell it ring

First think about

In fact, we are not a circle, but a polygon, a few images are several edges, if only four images, it is similar to the code above. But in our case, we still have to think of it as a circle

Since it is a ring, the radius of the ring and other information must be obtained first, and the radius must be changed according to the picture. The more pictures, the larger the radius, the wider the picture, the larger the radius will be

If you want to figure out the radius, you can calculate it in terms of the perimeter, and what’s the perimeter? Isn’t that the length of all the pictures end to end? So in that sense, this radius is pretty easy to calculate

Write the code

Before you write, know that you are writing something like this:

In the middle of the ring is the parent of all the pictures. First, all the pictures are stacked, which is to position all the pictures, and then center them. Then, let the picture move the radius of the Z axis, and rotate it by a certain Angle, and the ring comes out

Let’s look at action disassembly:

Didn’t see? That’s okay. One more time in slow motion

The basic principle is to rotate the image at a certain Angle and then push it out. Transform: rotateY(72deg) translateZ(300px); transform: rotateY(72deg) translateZ(300px) In this code, we’re going to calculate the displacement first, and then the rotation, so that we can push the image out and rotate it to the Angle that we want

How do you calculate the Angle? And it’s really easy to say for example, if you have a 5-sided shape, you can just divide 360 degrees by 5, and that’s how much each image is going to rotate.

Ring code: look here look here ~ can also click here to see the effect oh ~ but because of the use of github address, so not necessarily open

Once you have the basics, put the entire ring into a single image size parent and you can turn it into a slide show. When switching, you just need to rotate the corresponding Angle.

Slideshow complete code here oh ~ can also click here to see the effect oh ~ but because of the use of github address, so not necessarily open

The final result

  • This is our open source project element3 from the Flower mountain team welcome to try and star
  • A front-end component library that supports VUE3