3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery

This tutorial blog to learn how to create 3D image gallery with mouse wheel scrolling effect using HTML CSS and jQuery.

Video tutorial of 3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery

This tutorial video to learn how to create 3D image gallery with mouse wheel scrolling effect using HTML CSS and jQuery.

3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery [Source Codes]

This source code can help you to create 3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="gallery_box">
	<div class="gallery_box_outer">
		<div class="gallery_box_in" style="background-image: url('images/pic1.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic2.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic3.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic4.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic5.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic6.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic7.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic8.jpg');"></div>
		<div class="gallery_box_in" style="background-image: url('images/pic9.jpg');"></div>
	</div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #01092b;
}

.gallery_box{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.gallery_box_outer{
	width: 300px;
	height: 200px;
	position: relative;
	transition: all 1s ease-out;
	transform: perspective(1000px) rotateX(-8deg) rotateY(0deg);
	transform-style: preserve-3d;
}
.gallery_box_in{
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: center center;
	background-size: cover;
}
.gallery_box_in:nth-child(1){ transform: rotateY(0deg) translateZ(450px); }
.gallery_box_in:nth-child(2){ transform: rotateY(40deg) translateZ(450px); }
.gallery_box_in:nth-child(3){ transform: rotateY(80deg) translateZ(450px); }
.gallery_box_in:nth-child(4){ transform: rotateY(120deg) translateZ(450px); }
.gallery_box_in:nth-child(5){ transform: rotateY(160deg) translateZ(450px); }
.gallery_box_in:nth-child(6){ transform: rotateY(200deg) translateZ(450px); }
.gallery_box_in:nth-child(7){ transform: rotateY(240deg) translateZ(450px); }
.gallery_box_in:nth-child(8){ transform: rotateY(280deg) translateZ(450px); }
.gallery_box_in:nth-child(9){ transform: rotateY(320deg) translateZ(450px); }

JavaScript Code

Copy

var counter = 0;
$(document).bind("mousewheel",function(event){
	if(event.originalEvent.wheelDelta >0){
		counter += 10
		console.log(counter)
		$(".gallery_box_outer").css({"transform":"perspective(1000px) rotateX(-8deg) rotateY("+counter+"deg)"});
	}else{
		counter -= 10
		console.log(counter)
		$(".gallery_box_outer").css({"transform":"perspective(1000px) rotateX(-8deg) rotateY("+counter+"deg)"});
	}
})

3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery

Video tutorial of 3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery

3D Image Gallery Scrolling with Mouse Wheel Scroll using HTML CSS and jQuery [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery