3차원 회전 화면

 




상자 만들기

<body>
  <section>
    <article>
      <div></div>
    </article>

    <article>
      <div></div>
    </article>
   
    <article>
      <div></div>
    </article>
   
    <article>
      <div></div>
    </article>
  </section>
</body>


스타일

  • transform: 회전
  • perspective: 3차원 효과
  • transform-origin: 끝에 붙이기

section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;

  article{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    perspective: 600px;

    div{
      width: 100%;
      height: 100%;
      background: blue;
      opacity: 0.5;
    }

    &:nth-of-type(1){
      div {
        // y가 축이되어 회전
        transform: rotateY(45deg);
      }
    }

    &:nth-of-type(2){
      div {
        // X가 축이되어 회전
        transform: rotateX(45deg);
      }
    }

    &:nth-of-type(3){
      div {
        transform: rotateY(45deg);
        transform-origin: left center;
      }
    }

    &:nth-of-type(4){
      div {
        transform: rotateX(45deg);
        transform-origin: top center;
      }
    }
  }
}



회전 상자 만들기

<body>
  <section class="frame">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

    <button class="prev">prev</button>
    <button class="next">next</button>
  </section>
</body>


main.js

const frame = document.querySelector(".frame");
const ul = frame.querySelector("ul");
const slides = frame.querySelectorAll("ul li");

const prev = frame.querySelector(".prev");
const next = frame.querySelector(".next");

prev.addEventListener("click", () => {
  ul.append(ul.firstElementChild);
});

next.addEventListener("click", () => {
  ul.prepend(ul.lastElementChild);
});


style.css

@use "reset";

body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .frame {
    width: 700px;
    height: 400px;
    border: 1px solid black;
    position: relative;

    .prev {
      position: absolute;
      top: 50%;
      left: 0px;
      z-index: 3;
      padding: 40px;
    }
    .next {
      position: absolute;
      top: 50%;
      right: 0px;
      z-index: 3;
      padding: 40px;
    }

    ul {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      perspective: 1200px;

      li {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: blue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
        color: white;
        opacity: 0.4;
        transition: 0.5s;

        &:nth-of-type(1) {
          transform: translate(-1000px, 0px) rotateY(60deg);
          opacity: 0.1;
        }

        &:nth-of-type(2) {
          transform: translate(-500px, 0px) rotateY(40deg);
          opacity: 0.4;
        }

        &:nth-of-type(3) {
          transform: translate(0px, 0px) rotateY(0deg);
          opacity: 0.7;
        }

        &:nth-of-type(4) {
          transform: translate(500px, 0px) rotateY(-40deg);
          opacity: 0.4;
        }
        &:nth-of-type(5) {
          transform: translate(1000px, 0px) rotateY(-60deg);
          opacity: 0.1;
        }
      }
    }
  }
}




댓글 쓰기

다음 이전