css3 使用animation，transiform实现滚动骰子
css骰子
<style>.test {width: 80px;height: 80px;position: relative;transform-style: preserve-3d;animation: move 2s linear 0s infinite alternate;}.up,.down,.left,.right,.forwards,.back {width: 100%;height: 100%;display: grid;align-content: space-evenly;justify-items: center;position: absolute;font-size: 40px;border-radius: 20px;border: 2px solid gray;background-color: #fff;}.up {transform: rotateX(90deg) translateZ(50px);}.down {transform: rotateX(-90deg) translateZ(50px);grid-template-columns: repeat(3, 1fr);}.left {transform: rotateY(90deg) translateZ(50px);}.right {transform: rotateY(-90deg) translateZ(50px);grid-template-columns: repeat(2,1fr);}.forwards {transform: translateZ(50px);}.back {transform: translateZ(-50px);grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);align-items: center;}.up .item,.forwards .item:nth-child(2) {background-color: red;}.back .item:nth-child(3){grid-area: 1/2/3/3 ;background-color: red;}@keyframes move {0% {transform: rotateX(-90deg) rotateY(-90deg);}25% {transform: rotateX(0deg) rotateY(0deg);}50% {transform: rotateX(90deg) rotateY(90deg);}75% {transform: rotateX(180deg) rotateY(180deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}.item {width: 20px;height: 20px;background-color: black;border-radius: 50%;}</style>
<body><div class="test"><div class="up"><span class="item"></span></div><div class="down"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div><div class="left"><span class="item"></span><span class="item"></span></div><div class="right"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div><div class="forwards"><span class="item"></span><span class="item"></span><span class="item"></span></div><div class="back"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div></div>
</body>