.img,
.blindsimg {
    width: 100%;
    height: 100%;
    background-size: cover;
    display: flex;
}

.img>.item,
.blindsimg>.item {
    flex: 1;
    background-size: cover;
    background-position-x: calc(var(--index) * 10%);
    transition: 1s;
}

.img>.item.hide,
.blindsimg:hover>.item {
    transform: rotateY(90deg);
}

.hexagon-box1,
.hexagon-box2,
.hexagon-box3 {
    overflow: hidden;
}
.hexagon-box2,
.hexagon-box3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.hexagon-box1 {
    transform: rotate(120deg);
}

.hexagon-box2 {
    transform: rotate(-60deg);
}

.hexagon-box3 {
    transform: rotate(-60deg);
}

.hexagon-box3 img {
    width: 100%;
    height: 100%;
}