css实现六边形柱体旋转效果（移动端，pc端）

html

<div class="box">
    <div class="box-00"></div>
    <div class="box01">
        <img src="https://img1.baidu.com/it/u=1947170504,2052100748&fm=253&fmt=auto&app=138&f=JPEG" />
    </div>
    <div class="box02">
        <img src="https://img2.baidu.com/it/u=3724390669,1663648862&fm=253&fmt=auto&app=138&f=JPEG" />
    </div>
    <div class="box03">
        <img src="https://img2.baidu.com/it/u=3645863548,3947932803&fm=253&fmt=auto&app=138&f=JPEG" />
    </div>
    <div class="box04">
        <img src="https://img0.baidu.com/it/u=328880503,3439205998&fm=253&fmt=auto&app=138&f=PNG" />
    </div>
    <div class="box05">
        <img src="https://c1.51jujibao.com/imgs/20221108/a048a0fc0caa45afb3ec2155a3333bb3.jpg" />
    </div>
    <div class="box06">
        <img src="https://img0.baidu.com/it/u=1856123620,3576811447&fm=253&fmt=auto&app=138&f=JPEG" />
    </div>
</div>

css

.box {
    position: relative;
    width: 150px;
    height: 300px;
    margin: 0px auto;
    margin-top: -165px;
    transform-style: preserve-3d;
    animation: identifier 20s infinite linear;
}

@keyframes identifier {
    0% {
        transform: rotatex(-5deg) rotateY(0deg);
    }

    50% {
        transform: rotatex(-5deg) rotateY(180deg);
    }

    100% {
        transform: rotatex(-5deg) rotateY(360deg);
    }
}

.box > div {
    width: 150px;
    height: 300px;
    position: absolute;
}

.box img {
    width: 150px;
    height: 300px;
}

.box-00 {
    width: 150px!important;
    height: 260px!important;
    background-color: skyblue;
    transform: rotateX(90deg) translateZ(130px);
}

.box-00::before{
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: 0;
    left:-75px;
    border-right: 75px solid skyblue;
    border-top:130px solid transparent;
    border-bottom:130px solid transparent;
}
.box-00::after{
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: 0;
    right:-75px;
    border-left: 75px solid skyblue;
    border-top:130px solid transparent;
    border-bottom:130px solid transparent;
}

.box01 {
    transform: rotateY(0deg) translateZ(130px);
}

.box02 {
    transform: rotateY(60deg) translateZ(130px);
}

.box03 {
    transform: rotateY(120deg) translateZ(130px);
}

.box04 {
    transform: rotateY(180deg) translateZ(130px);
}

.box05 {
    transform: rotateY(240deg) translateZ(130px);
}

.box06 {
    transform: rotateY(300deg) translateZ(130px);
}

1. 根据需求修改box宽高度 box0+n的translateZ()
2. 如果是小程序，需要修改标签 div>view img>image