Source codes:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>3D Slider</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background: linear-gradient(120deg, #ccc, #000);
font-family: sans-serif;
}
.slider{
width: 80%;
max-width: 600px;
height: 300px;
position: relative;
}
.slides{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
transform: rotateY(0deg);
}
.slide{
position: absolute;
width: 100%;
height: auto;
backface-visibility: hidden;
}
.slide img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 10px;
}
.slide:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
.slide:nth-child(2) {
transform: rotateY(120deg) translateZ(300px);
}
.slide:nth-child(3) {
transform: rotateY(240deg) translateZ(300px);
}
.navigation{
position: absolute;
bottom: -20px;
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}
.navigation button {
background: #ffffff42;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.navigation button:hover{
background: #f5576c;
color: #fff;
}
</style>
</head>
<body>
<div class=”slider”>
<div class=”slides” id=”slides”>
<div class=”slide”>
<img src=”https://tinyurl.com/3wdzhd9v” alt=”Slide 1″>
</div>
<div class=”slide”>
<img src=”https://tinyurl.com/3kmufnx4″ alt=”Slide 2″>
</div>
<div class=”slide”>
<img src=”https://tinyurl.com/2eb8xvf2″ alt=”Slide 2″>
</div>
</div>
<div class=”navigation”>
<button onclick=”rotateSlider(-120)”> ❮ Prev </button>
<button onclick=”rotateSlider(120)”> Next ❯</button>
</div>
</div>
<script>
let currentAngle = 0;
function rotateSlider(angle) {
const slides = document.getElementById(‘slides’);
currentAngle +=angle;
slides.style.transform = `rotateY(${
currentAngle }deg)`;
}
</script>
</body>
</html>
