ドラッグで回転する3Dなギャラリーのアイディア

DEMO 表示

小気持ち動きの、3Dギャラリー

商品のディスプレイや、バナーを立体的なスライドとして使えます。

コードはライブラリーを使わずにjavascriptだけで出来ています。

個数を変えるには、コードに手を加える必要があります。

ボトルの画像は、CSSでバックグラウンドで指定してしてありHTMLは非常にシンプルになっています。

HTML

<h1>drag to rotate the bottles</h1>
<div class="slider">
 <div class="slides">
 <div class="slide"></div>
 <div class="slide"></div>
 <div class="slide"></div>
 </div>
</div>

SASS

$size: 100vmin;
$width: $size/500*135;
$speed: 0.3s;
html, body {
 overflow: hidden;
 background: #000;
}

div {
 box-sizing: border-box;
}

.slider {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: $size/-2;
 width: $size;
 height: $size;
 user-select: none;
 cursor: grab;
 background: #fff;
 border: 3px solid #000;
}

.slides {
 position: relative;
 width: $size;
 height: $size;
}

.slide {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: $size/-2 $width/-2;
 width: $width;
 height: $size;
 backface-visibility: hidden;
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/coke.png);
 background-size: 100% auto;
 background-repeat: no-repeat;
 background-position: 50% 50%;
 z-index: 1;
 
 &:nth-child(2) {
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/fanta.png);
 }
 &:nth-child(3) {
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/mountaindew.png);
 }
}



h1 {
 z-index: 5;
 position: absolute;
 top: 0;
 left: 0;
 background: #000;
 color: #fff;
 margin: 0;
 padding: 0.5em;
 font-size: 20px;
 font-family: sans-serif;
 font-weight: 200;
 text-transform: uppercase;
}

コードをファイルでダウンロード

DOWNLOAD