cube-gallery v2.1.0

Cube Gallery

CSS 3d cube gallery for all your media

Installation

npm i --save cube-gallery

Getting Started

    <div class="cube-gallery">
      <div class="cube-wrap">
        <div class="cube-side">
          <div class="side-bg">
            <img src="https://images.unsplash.com/photo-1614648718611-0635f29016cb?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
          </div>
          <div class="side-content">
            <a href="#">Front</a>
          </div>
        </div>
        <div class="cube-side">
          <div class="side-bg">
            <div class="" style="background: #f2f; width: 100%; height: 100%;"></div>
          </div>
          <div class="side-content">
            <a href="#">Right</a>
          </div>
        </div>
        <div class="cube-side">
          <div class="side-bg">
            <!-- <img src="https://images.unsplash.com/photo-1614676314170-3eb1d98d0a25?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" /> -->
            <div class="" style="background: #2ff; width: 100%; height: 100%;"></div>
          </div>
          <div class="side-content">
            <a href="#">Back</a>
          </div>
        </div>
        <div class="cube-side">
          <div class="side-bg">
            <!-- <img src="https://images.unsplash.com/photo-1614676166964-c25efc2abd3b?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" /> -->
            <div class="" style="background: #ff2; width: 100%; height: 100%;"></div>
          </div>
          <div class="side-content">
            <a href="#">Left</a>
          </div>
        </div>
        <div class="cube-side">
          <div class="side-bg">
            <img src="https://images.unsplash.com/photo-1614613806008-b6e485c050e9?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
          </div>
          <div class="side-content">
            <a href="#">Top</a>
          </div>
        </div>
        <div class="cube-side">
          <div class="side-bg">
            <img src="https://images.unsplash.com/photo-1614622539136-fd8e06f32f31?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
          </div>
          <div class="side-content">
            <a href="#">Bottom</a>
          </div>
        </div>
      </div>

See demo/index.html for more