“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

With the content of the previous two chapters, you should have a certain understanding of CSS 3D construction, hands-on friends may have started to see the effect of their own.

Today we are going to go over what we have learned, and here is a “3D photo wall “example to further our knowledge.

structure

Use a container div. Photo to hold six faces

<div class="photo">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
Copy the code

Containers and common styles

.photo {
  position: absolute;
  width: 210px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin-left: -105px;
  margin-top: -60px;
  transform-style: preserve-3d;
}
.photo .example {
  position: absolute;
  width: 210px;
  height: 120px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0.0.0.5);
  bottom: 0;
}
Copy the code

Using absolute position: absolute6 child elements will now overlap

We first render the entire easy element in 3D space (transform-style: preserve-3D)

Fixed width and height elements are centered horizontally and vertically

{
  position: absolute;
  width: 210px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin-left: -105px; / / / wide2
  margin-top: -60px; / / / high2
}
Copy the code

Which of the 15 intermediate CSS methods have you used?

Add a box-shadow to each element (see the previous sections to learn more about CSS shadows)

The position of the child element

Transform is then used to change the position of each child element in space.

.photo .example{...background-color: rgba(253.121.168.0.52);
}
.photo .example:nth-child(1) {
  transform: rotateY(0) translateZ(280px);
}
.photo .example:nth-child(2) {
  transform: rotateY(60deg) translateZ(280px);
}
.photo .example:nth-child(3) {
  transform: rotateY(120deg) translateZ(280px);
}
.photo .example:nth-child(4) {
  transform: rotateY(180deg) translateZ(280px);
}
.photo .example:nth-child(5) {
  transform: rotateY(240deg) translateZ(280px);
}
.photo .example:nth-child(6) {
  transform: rotateY(300deg) translateZ(280px);
}
Copy the code

The previous space coordinate map is not very clear, please see the picture below, more intuitive.

Therefore, in our spatial album, only the 3D rotation of each element along the Y-axis is required, with an interval of rotateY(60deg) to form a circle

animation

.photo{...animation: rotateAn
            18s 
            ease-in-out 
            infinite 
            2s;
}
@keyframes rotateAn {
  0% {
    transform: rotateY(0);
  }
  16.7% {
    transform: rotateY(60deg);
  }
  33.3% {
    transform: rotateY(120deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  66.7% {
    transform: rotateY(240deg);
  }
  83.3% {
    transform: rotateY(300deg);
  }
  100% {
    transform: rotateY(360deg); }}Copy the code

And then the whole container can be rotated around the Y-axis

Animation

Animation: name duration timing-function delay iteration-count direction;

  1. Name (keyframe name that needs to be bound to the selector)

  2. Duration (time, in seconds or milliseconds, to complete the animation)

  3. Function (Animation speed curve)

  4. Delay (the delay before the animation starts)

  5. Count (number of times the animation should play)

  6. Direction (Should animation take turns playing backwards)

CSS3 Most likely to confuse properties Transition Transform Animation Translate

It’s weird, isn’t it? It’s not three-dimensional enough

That’s right, so let’s add a div layer to wrap around the container and add some styles

<div class="container">
  <div class="photo">.</div>
</div>
Copy the code
.container{
  position: relative;
  perspective: 1500;
}
Copy the code

perspectiveOfficial definition:

The Perspective property defines the distance, in pixels, of a 3D element from the view. This property allows you to change 3D elements to see the view of 3D elements.

When the Perspective attribute is defined for an element, its children get perspective, not the element itself.

perspectiveColloquially:

Perspective refers to the perspective from which we see an object, either near or far. For example, we are facing a computer: when I am infinitely close to the computer screen, the computer screen is infinitely large; When we stand away from the computer, the screen becomes infinitely smaller.

Is there a different visual sense?

change

You can add an IMG tag directly under each element to replace your favorite image

<div class="container">
  <div class="photo">
    <div class="example">
      <img src="./b1.jpg" alt="">
    </div>
    <div class="example">.</div>.</div>
</div>
Copy the code
.photo .example img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Copy the code

The object-fit attribute specifies how the contents of an element should fit into the specified height and width of the container.

1. By default, fill is not guaranteed to keep the original proportion, and the content is stretched to fill the entire content container.

2, contain the original size proportion. Content is scaled.

3, Cover keep the original size proportion. But some content may be cut.

4. None preserves the length and width of the original element content, meaning that the content will not be reset.

5, scale-down maintain the original size proportion. The content is the same size as one of None or contain, depending on which of them gets the smaller object.

Object-fit: Cover is the best way to handle image presentation.

We can also set the background image of each element without adding the IMG tag.

conclusion

Follow me to learn more about programming, not just the front end!

If you have any questions, please leave them in the comments section.

Thank you all for your continued support.