그누보드5를 위한 360도 3D 슬라이드 효과 스킨입니다.

 

출처는 http://codepen.io/dudleystorey/pen/kiajB 입니다.

 

출처 적용방법 :

1. HTML.

<div id=carousel>

<figure id=spinner>

<img src=//demosthenes.info/assets/images/wanaka-tree.jpg alt="">

<img src=//demosthenes.info/assets/images/still-lake.jpg alt="">

<img src=//demosthenes.info/assets/images/pink-milford-sound.jpg alt="">

<img src=//demosthenes.info/assets/images/paradise.jpg alt="">

<img src=//demosthenes.info/assets/images/morekai.jpg alt="">

<img src=//demosthenes.info/assets/images/milky-blue-lagoon.jpg alt="">

<img src=//demosthenes.info/assets/images/lake-tekapo.jpg alt="">

<img src=//demosthenes.info/assets/images/milford-sound.jpg alt="">

</figure>

</div>

<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>

<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>

2. CSS

div#carousel { 

  perspective: 1200px; 

  background: #100000; 

  padding-top: 10%; 

  font-size:0; 

  margin-bottom: 3rem; 

  overflow: hidden; 

}

figure#spinner { 

  transform-style: preserve-3d; 

  height: 300px; 

  transform-origin: 50% 50% -500px; 

  transition: 1s; 

} 

figure#spinner img { 

  width: 40%; max-width: 425px; 

  position: absolute; left: 30%;

  transform-origin: 50% 50% -500px;

  outline:1px solid transparent; 

}

figure#spinner img:nth-child(1) { transform:rotateY(0deg); 

}

figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }

figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }

figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }

figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }

figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }

figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }

figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }

div#carousel ~ span { 

  color: #fff; 

  margin: 5%; 

  display: inline-block; 

  text-decoration: none; 

  font-size: 2rem; 

  transition: 0.6s color; 

  position: relative; 

  margin-top: -6rem; 

  border-bottom: none; 

  line-height: 0; }

div#carousel ~ span:hover { color: #888; cursor: pointer; }

3. JS

<script>

 var angle = 0;

function galleryspin(sign) { 

spinner = document.querySelector("#spinner");

if (!sign) { angle = angle + 45; } else { angle = angle - 45; }

spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");

}

</script>

 

그누보드에 적용방법:

1. 스킨을 다운로드하여 압축을 풀고,

2. theme/테마명/skin/latest/ 아래에 ftp를 이용하여 업로드

3. 스킨을 적용할 페이지를 편집기로 열고 최신글 적용하면 됩니다.

 

미리보기 : http://www.live24.co.kr/theme/basic/deg.php