3d page 만들기

3d 페이지를 만들어봤습니다.

ie에서는 Edge 이상에서만 지원합니다.

터치 제스처를 구현해주는 hammer.js를 같이 사용했습니다.

 

<header>
   <h1>Desktop 3D Page</h1>
</header>
<div class="container">
   <div class="wrapper">
      <div class="page">
         <h1>page1</h1>
         <ul class="icons">
            <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-camera fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-chrome fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
         </ul>
      </div>
      <div class="page">
         <h1>page2</h1>
         <ul class="icons">
            <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-camera fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-chrome fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
         </ul>
      </div>
      <div class="page">
         <h1>page3</h1>
         <ul class="icons">
            <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-camera fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-chrome fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
         </ul>
      </div>
      <div class="page">
         <h1>page4</h1>
         <ul class="icons">
            <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-camera fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-chrome fa-3x"></i></a></li>
            <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
         </ul>
      </div>
   </div>
</div>
<ul id="indicator"></ul>

 

.container {
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   perspective: 800px;
   overflow: hidden;
   box-sizing: border-box;
}

.wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   margin: auto;
   transform-style: preserve-3d;
   transition-duration: 1s;
}

.wrapper>.page {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   padding: 80px 0 0;
   backface-visibility: hidden;
}

.wrapper>.page:nth-child(1) {
   background: url(https://picsum.photos/id/202/1400/900) no-repeat 50% / cover;
}

.wrapper>.page:nth-child(2) {
   background: url(https://picsum.photos/id/200/1400/900) no-repeat 50% / cover;
}

.wrapper>.page:nth-child(3) {
   background: url(https://picsum.photos/id/201/1400/900) no-repeat 50% / cover;
}

.wrapper>.page:nth-child(4) {
   background: url(https://picsum.photos/id/203/1400/900) no-repeat 50% / cover;
}

#indicator {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 20px;
   text-align: center;
   margin: 20px 0 0;
}

#indicator li {
   display: inline-block;
   font-size: 12px;
   color: #fff;
   padding: 5px 10px;
   margin: 5px;
   border: 1px solid #999;
   border-radius: 50%;
}

#indicator li.active {
   background: rgba(50%, 50%, 50%, 0.5);
   color: #fff;
}

.icons {
   padding: 64px;
   overflow: hidden;
}

.icons>li {
   display: inline-block;
   margin: 0 24px 64px 24px;
   background: #999;
   padding: 10px;
   width: 48px;
   height: 48px;
   border-radius: 15px;
   text-align: center;
   border: 1px solid rgba(100, 100, 100, 0.3);
   color: #fff;
}

 

var wrapper = document.querySelector('.wrapper'),
   page = document.querySelectorAll('.page'),
   indicator = document.getElementById('indicator'),
   indicatorLi = indicator.querySelectorAll('li');

var yDeg = 0,
   indicatorNum = 1,
   indicatorLength = page.length,
   w = page[0].offsetWidth,
   pageAngle = 0,
   pageVector = 0;

var hammer = new Hammer(wrapper);

function initPage() {
   w = page[0].offsetWidth;
   console.log(w)
   for (var i = 0; i < indicatorLength; i++) {
      page[i].style.transform = 'rotateY(' + pageAngle + 'deg) translateZ(' + (w / 2) + 'px)';
      pageAngle += 90;
   }

   wrapper.style.transform = 'translateZ(' + (-w / 2) + 'px) rotateY(' + yDeg + 'deg)';
}

function initIndicator() {
   for (var i = 0; i < indicatorLength; i++) {
      indicator.innerHTML += '<li>' + (i + 1) + '</li>';
   }

   indicatorLi = indicator.querySelectorAll('li');
   changePage(indicatorNum);
}

function changePage(inum) {
   indicatorLi[inum - 1].setAttribute('class', 'active');
   yDeg = -90 * (inum - 1);
   wrapper.style.transform = 'translateZ(' + (-w / 2) + 'px) rotateY(' + yDeg + 'deg)';

   for (var i = 0; i < indicatorLength; i++) {
      indicatorLi[i].removeAttribute('class');
   }

   indicatorLi[inum - 1].setAttribute('class', 'active');
}

initPage();
initIndicator();

for (var i = 0; i < indicatorLength; i++) {
   indicatorLi[i].addEventListener('click', function() {
      indicatorNum = parseInt(this.innerText);
      changePage(indicatorNum);
   });
}

hammer.on('swipeleft', function(e) {
   if (indicatorNum < indicatorLength) {
      pageVector = 1;
   } else pageVector = 0;

   indicatorNum += pageVector;
   changePage(indicatorNum);
});

hammer.on('swiperight', function(e) {
   if (indicatorNum > 1) {
      pageVector = -1;
   } else pageVector = 0;

   indicatorNum += pageVector;
   changePage(indicatorNum);
});

window.onresize = function() {
   initPage();
}

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/b8ynw9f4/