<!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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.