效果图 布局

<div class="img">
    <div class="item" style="--index:0"></div>
    <div class="item" style="--index:1"></div>
    <div class="item" style="--index:2"></div>
    <div class="item" style="--index:3"></div>
    <div class="item" style="--index:4"></div>
    <div class="item" style="--index:5"></div>
    <div class="item" style="--index:6"></div>
    <div class="item" style="--index:7"></div>
    <div class="item" style="--index:8"></div>
    <div class="item" style="--index:9"></div>
</div>

css

.img{
    width: 500px;
    height: 500px;
    background-image: url(img/1.jpg);
    background-size: cover;
    display: flex;
}
.img>.item{
    flex: 1;
    background-image: url(img/2.JPG);
    background-size: cover;
    background-position-x: calc(var(--index) * 10%);
    transition: 1s;
}
.img:hover>.item{
    transform: rotateY(90deg);
}