If you read about 3d in CSS and didn’t fully understand how to make 3d in the way you want using plain CSS, I hope this mini article can be of help. In the end, you will be able to build something like this :) https://codepen.io/juliashlykova/pen/XWQzXVm?embedable=true Perspective What is in CSS? When we set for the element, it tells the browser that a child of this element should behave as though they are in 3D space. perspective perspective determines the distance between user and z=0 plane. Amount of perspective I tried to figure out how it can be that the more perspective amount we set, the less perspective we see. It was really confusing for me at first. Unless I draw some schema: When we change the z coordinate ( ) for the child, we move the child along this imaginary z-axis toward the user. So the further this z=0 plane is from us, the less noticeable the change is. translateZ() Perspective-origin determines the position of the user’s eyes relative to the transformed elements. By default, this position is centered: perspective-origin: horisontal-position vertical-position perspective-origin: 50% 50% Transform-style allows children of the element to be positioned in 3D space. And my question was: but isn’t it what perspective for? Actually, no. doesn’t add depth. If there is no perspective in the parent’s element, then we won’t see actual 3d- representation: transform-style: preserve-3d Transform-style https://codepen.io/juliashlykova/pen/BaEmWqq?editors=1100&embedable=true just allows children to live in their own 3D space. transform-style: preserve-3d Book Animation Now, let’s do some cool animation 😃. First of all, our body will look like this: index.html <div class="container">
    <div class="book">
      <span class="shadow"></span>
      <div class="back"></div>
      <div class="cover-end"></div>
      <div class="page last">
        <button class="btn-tale">Tale begins...</button>
      </div>
      <div class="page third"></div>
      <div class="page second"></div>
      <div class="page first"></div>
      <div class="cover">
        <img src="https://cdn.pixabay.com/photo/2024/03/30/12/44/landscape-8664708_1280.png" alt="">
      </div>
    </div>
  </div> In what follows, I omit insignificant properties for the topic; you can look at them in the original code in the introduction. We have a block for every page since every page will behave differently. Let’s first add to the container block: div perspective .container {
  perspective: 500px;
  perspective-origin: 50% 50%;
} We use default perspective-origin. But I preferred to explicitly set it for better understanding. So, our eyes are at the center of the container and plane is at 500px distance from us. z=0 At this  point, our block is set on the plane and doesn’t have any 3d features. Let’s add to allow pages to behave in their own 3d-space: book z=0 transform-style .book {
  position: relative;
  transform-style: preserve-3d;
}

.book>div {
  position: absolute;
  top: 0;
  left:0;
  transition: transform 2s;
} Now, let’s add actual 3d :) .cover {
  transform: scaleY(1.05) rotateY(-10deg);
}

.page.first {
  transform: translateX(2px) rotateY(-10deg);
}

.page.second {
  transform: translateX(4px) rotateY(-10deg);
}

.page.third {
  transform: translateX(6px) rotateY(-10deg);
}

.page.last {
  transform: translateX(8px) rotateY(-10deg);
} To achieve volume, we move every page a little to the right and rotate it around the y-axis. Now, let’s change the behavior of the book when we hover over it: .book:hover .cover{
  transform: rotateY(-150deg);
}

.book:hover .page.first{
  transform: translateX(2px) rotateY(-150deg);
}

.book:hover .page.second{
  transform: translateX(4px) rotateY(-130deg);
}

.book:hover .page.third{
  transform: translateX(6px) rotateY(-110deg);
} Alright, here, we change rotation from to more extreme values to achieve the “opening effect.” Also, we should save our , since transform rewrites all its’ previous values. -10deg translateX And… that’s it! I hope you understand now a little more about perspective in CSS 🙂.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Create a 3D Effect With CSS Perspective and Book Animation

Too Long; Didn't Read

JSha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Create a 3D Effect With CSS Perspective and Book Animation

Too Long; Didn't Read

JSha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES