Press "Enter" to skip to content

3D Perspective Image Carousel With CSS

3D perspective photos is a great 3D carousel display that enables the user to scroll through a list of photos with different perspectives.

javascript perspective transform image, css 3d perspective hover, perspective css, 3d image effect on mouse movement, 3d image effect css

How to make use of it:

1. Add images to the carousel.

<div id="app" data-page="0">
  <div class="sliders">
    <div class="slide-left">
      &laquo;
    </div>
    <div class="slide-right">
      &raquo;
    </div>
  </div>
  <div class="row">
    <div class="image">
      <div class="box">
        // Add Image Here
      </div>
    </div>
    <div class="image">
      <div class="box">
        // Add Image Here
      </div>
    </div>
    <div class="image">
      <div class="box">
        // Add Image Here
      </div>
    </div>
    ...
  </div>
</div>

2. The essential CSS for the carousel & controls.

#app {
  display: flex;
  flex-flow: column nowrap;
  perspective: 350px;
}

.row {
  height: 15rem;
  display: flex;
  flex-flow: row nowrap;
  flex: 0;
  transition: all 1s cubic-bezier(0.85, 0, 0.15, 1);
  transform: rotate3d(-1,.5,0,-10deg) translateX(-0);
}

.row .image {
  height: 100%;
  box-shadow: 0 -5px 30px rgba(0,0,0,.3);
  cursor: pointer;
  position: relative;
  margin-right: 1rem;
}

.row .image:hover .box:after {
  opacity:1;
}

.row .image .box:after {
  content: '';
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.8));
}

.row .image:hover img {
  transform: scale(1.1);
}

.row .image .box {
  overflow: hidden;
  height: 100%;
  
}

.row .image .box img {
  height:15rem;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* slider controls */
.slide-left, .slide-right {
  position: fixed;
  cursor: pointer;
  height: 100vh;
  width: 100px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 5rem;
  transition: all 1s;
  z-index: 1000;
  user-select: none;
  top: 0;
}

.sliders .slide-left {
  background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.0));
  padding: 2rem;
  left: 0;
}

.sliders .slide-left:hover {
  background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.3));
}

.sliders .slide-right {
  background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.0));
  padding: 2rem;
  right: 0;
}

.sliders .slide-right:hover {
  background: linear-gradient(to left, rgba(0,0,0,.9), rgba(0,0,0,.3));
}

3. The core JavaScript to allow the 3D perspective picture carousel.

let app = document.getElementById('app');
let scrollAmount = document.body.clientWidth*1/3;
let rows = document.querySelectorAll('.row');
document.querySelector('.slide-right').addEventListener('click', (e) => {
    let currentPage = parseInt(app.getAttribute('data-page'));
    let targetPixel = (currentPage+1) * scrollAmount;
    for(let i = 0; i < rows.length; i++) {
        rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
    }
    app.setAttribute('data-page', currentPage+1);
})
document.querySelector('.slide-left').addEventListener('click', (e) => {
    let currentPage = parseInt(app.getAttribute('data-page'));
    let targetPixel = (currentPage-1) * scrollAmount;
    if(currentPage == 0) return;
    for(let i = 0; i < rows.length; i++) {
        rows[i].style.transform = "rotate3d(-1,.5,0,-10deg) translateX(-"+targetPixel+"px)"
    }
    app.setAttribute('data-page', currentPage-1);
})
document.body.addEventListener('mousemove', (e) => {
    let mouseLocation = {
        x: e.clientX,
        y: e.clientY,
    }
})

3D Perspective Image Carousel, perspective images Plugin/Github

3D-Perspective-Image-Demo


See Demo And Download

Official Website(zuramai): Click Here

This superior jQuery/javascript plugin is developed by zuramai. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *