<!DOCTYPE html>
<html>
<head>
<title>3d Animasyon</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/1.jpg">
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/2.jpg">
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/3.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/4.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/5.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/6.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/7.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/8.jpg" >
</div>
<div class="small-image">
<img src="https://www.kodsozluk.com/resimler/9.jpg" >
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.hero {
display: flex;
width: 300px;
height: 300px;
flex-wrap: wrap;
margin: 150px auto;
}
.small-image{
flex-basis:100px;
cursor: pointer;
height:100px;
position: relative;
transition: 2s;
}
.small-image img {
width: 100px;
height: 100px;
}
.small-image::after {
content: "";
width: 100px;
height: 30px;
bottom: -29px;
left:7px;
position: absolute;
background: #2d5661;
transform: skewX(26deg);
}
.small-image::before {
content: "";
width: 15px;
height: 100px;
right: -14px;
top:15px;
position: absolute;
background: #3c8898;
transform: skewY(65deg);
}
.hero:hover .small-image:nth-child(1) {
transform: translate(60px,230px) rotate(360deg);
}
.hero:hover .small-image:nth-child(2) {
transform: translate(91px,295px) rotate(360deg);
}
.hero:hover .small-image:nth-child(3) {
transform: translate(440px,-220px) rotate(360deg);
}
.hero:hover .small-image:nth-child(4) {
transform: translate(100px,-120px) rotate(360deg);
}
.hero:hover .small-image:nth-child(5) {
transform: translate(-370px,320px) rotate(360deg);
}
.hero:hover .small-image:nth-child(6) {
transform: translate(0px,-480px) rotate(360deg);
}
.hero:hover .small-image:nth-child(7) {
transform: translate(-260px,-150px) rotate(360deg);
}
.hero:hover .small-image:nth-child(8) {
transform: translate(-280px,-40px) rotate(360deg);
}
.hero:hover .small-image:nth-child(9) {
transform: translate(-400px,-150px) rotate(360deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.