本来是想搞一个立方体图片，结果刚好想到了骰子就在源代码上进行了一些调整

废话不多说，双手献上代码供各位点评，下面这段是通过cv大法搞来的（侵权必删）

1：3d立方体相册

css样式

.content {
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
    position: relative;
    margin: 80px auto;
    animation: rotate linear 20s infinite;
    text-align: center;
}
@-webkit-keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.content > div {
    width: 80px;
    height: 80px;
    position: absolute;
    opacity: 0.8;
    background-color: #eec;
    color: orangered;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.content > div > img {
    width: 80px;
    height: 80px;
}
.content .top {
    transform: rotateX(90deg) translateZ(40px);
}
.content .left {
    transform: rotateY(-90deg) translateZ(40px);
}
.content .bottom {
    transform: rotateX(-90deg) translateZ(40px);
}
.content .right {
    transform: rotateY(90deg) translateZ(40px);
}
.content .front {
    transform: rotateY(0deg) translateZ(40px);
}
.content .after {
    transform: translateZ(-40px) rotateY(180deg);
}

下面是html部分（可用在vue组件内，亲试有效） ，不用做任何修改

<div class="content">
    <div class="top">
        <img :src="slider1" />
    </div>
    <div class="bottom">
        <img :src="slider2" />
    </div>
    <div class="left">
        <img :src="slider3" />
    </div>
    <div class="right">
        <img :src="slider4" />
    </div>
    <div class="front">
        <img :src="slider2" />
    </div>
    <div class="after">
        <img :src="slider4" />
    </div>
</div>

2：源代码基础进行修改实现骰子效果（有点丑，请轻喷）

html部分

<div class="content">
    <div class="top">
        <ul class="one">
            <li></li>
        </ul>
    </div>
    <div class="bottom">
        <ul class="six">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li style="margin-bottom: 5px;"></li>
            <li style="margin-bottom: 5px;"></li>
        </ul>
    </div>
    <div class="left">
        <ul class="three">
            <li style="align-self: flex-start;"></li>
            <li style=" margin: 0;"></li>
            <li style="align-self: flex-end;"></li>
        </ul>
    </div>
    <div class="right">
        <ul class="four">
            <li></li>
            <li></li>
            <li style="margin-top: 0; margin-bottom: 5px;"></li>
            <li style="margin-top: 0; margin-bottom: 5px;"></li>
        </ul>
    </div>
    <div class="front">
         <ul class="five" style="position: relative;">
            <li style="position: absolute; margin: 0; left: 30px; top: 30px;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="after">
        <ul class="two">
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

css样式（在原样式基础增加）

.content ul {
    padding: 0;
    list-style: none;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    // flex-flow: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
content ul.two {
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: space-evenly;
}
.content ul.three {
    flex-wrap: nowrap;
}
.content ul.three li {
    margin: 0;
}
.content ul.four li {
    margin: 10px 10px 0;
}
.content ul.six li {
    margin: 5px 10px 0;
}
.content li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    margin: 10px;
}
.one li,
.three li,
.four li {
    background-color: red;
}

虽然这个丑了吧唧的骰子还有很大的优化空间，但是......我不搞了，马上过年了，准备进入新一轮学习，大家一起加油

原文链接：Vue，实现3D盒子旋转相册_y521123y的博客-CSDN博客_vue 旋转相册