How to Realize CSS3 3D Picture Stacking Switching Animation

How to Realize CSS3 3D Picture Stacking Switching Animation: BY Harry25 Nov,2020; Tags:
CSS3 Image

Introduction

Today I will share with you a very good CSS3 3D style picture stacking switching animation. When the mouse moves over the picture, the picture will be rotated to the current window to highlight, and other pictures will be hidden behind it, presenting a 3D stereoscopic visual effect . More importantly, the picture switching is very smooth when the mouse is over, and the user experience is relatively good.

How to Realize CSS3 3D Picture Stacking Switching Animation

Instructions

HTML Body Code

<div class="gallery-container">
	<div class="gallery">
		<div class="frame">
			<img class="image" src="img/pumpernickel.png">
			<div class="info">Pumpernickel</div>
		</div>
		<div class="frame">
			<img class="image" src="img/rye.png">
			<div class="info">Rye</div>
		</div>
		<div class="frame">
			<img class="image" src="img/wheat.png">
			<div class="info">Wheat</div>
		</div>
		<div class="frame">
			<img class="image" src="img/ciabatta.png">
			<div class="info">Ciabatta</div>
		</div>
		<div class="frame">
			<img class="image" src="img/baguette.png">
			<div class="info">Baguette</div>
		</div>
	</div>
</div>

Css Code

.gallery-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.gallery {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 200px;
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.frame {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  border-radius: 4px;
  position: relative;
  height: 100%;
  width: 200px;
  background: white;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(#cfaf7f, #6a4a0f);
}

Js Code

var $$ = function $$(selector) {return document.querySelectorAll(selector);};
var tick = 0;

function lerp(n1, n2, speed) {
	return (1 - speed) * n1 + speed * n2;
}

function angle(from, to) {
	return Math.atan2(
	to[1] - from[1],
	to[0] - from[0]);
}

function distance(from, to) {
	return Math.sqrt(
	Math.pow(to[0] - from[0], 2),
	Math.pow(to[1] - from[1], 2));

}

function distNorm(from, to, xMax, yMax) {
	return Math.sqrt(
	Math.pow((to[0] - from[0]) / xMax, 2),
	Math.pow((to[1] - from[1]) / yMax, 2));

}

VIEW NOW