<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-size: 1.5rem;
}
body{
background: black;
display: flex;
align-items: center;
justify-content: center;
min-width: 100vw;
min-height: 100vh;
}
.main{
height: 200px;
width: 200px;
position: relative;
transform-origin: center center;
perspective: 1000px;
transform-style: preserve-3d;
transition-duration: 1s;
}
.main div{
position: absolute;
background: aqua;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
img{
height: 200px;
width: 200px;
}
.main .front{
transform: translateZ(100px);
}
.main .back{
transform: rotateY(180deg) translateZ(100px);
}
.main .left{
transform: rotateY(-90deg) translateZ(100px);
}
.main .right{
transform: rotateY(90deg) translateZ(100px);
}
.main .top{
transform: rotateX(90deg) translateZ(100px);
}
.main .bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*@keyframes rotate{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateX(360deg);
}
}*/
button{
position: absolute;
bottom: 100px;
padding: 8px;
border-radius: 10px;
background: linear-gradient(49deg, blue ,white);
border: 2px solid aqua;
}
.next{
right: 40px;
}
.prev{
left: 40px;
}
</style>
</head>
<body>
<div class="main" id="main">
<div class="front"><span><img src="alluArjun.jpg" alt="" /></span></div>
<div class="left"><span><img src="cartoon.jpg" alt="" /></span></div>
<div class="back"><span><img src="alluArjun.jpg" alt="" /></span></div>
<div class="bottom"><span><img src="cartoon.jpg" alt="" /></span></div>
<div class="right"><span><img src="cartoon.jpg" alt="" /></span></div>
<div class="top"><span><img src="alluArjun.jpg" alt="" /></span></div>
</div>
<button class="next" id="next">Next</button>
<button class="prev" id="prev">Prev</button>
</body>
<script type="text/javascript" charset="utf-8">
let next = document.getElementById("next");
let prev = document.getElementById("prev");
let main = document.getElementById("main");
let a = 0;
next.addEventListener('click',function(){
a-=90;
main.style.transform = `rotateY(${a}deg)`;
});
prev.addEventListener('click',function(){
a+=90;
main.style.transform = `rotateY(${a}deg)`;
});
</script>
</html>
Comments
Post a Comment