纯CSS3制作骰子3D旋转动画效果

闲暇之余看了一些关于CSS3的3D动画方面的文章，自己写了一个3D骰子旋转动画效果，代码分享给大家。
先直接上效果图：



1.首先创建一个div用来装骰子（手动滑稽）

<div class="stage">            <div class="club>                <div class="front"></div>                <div class="back"></div>                <div class="left"></div>                <div class="right"></div>                <div class="top"></div>                <div class="buttom"></div>            </div>        </div>

2.创建一个css文件，在html页面引入就行，关键点都打上注释了，直接附上源码。

body{    margin: 0px;    padding: 0px;}/* 使用径向渐变设置背景颜色 */html{    background-image: radial-gradient(ellipse at center,yellow,black);    height: 100%;}.stage{    width: 100PX;    height: 100PX;    position: absolute;    left: 50%;    top: 50%;    margin-left: -10em;    margin-top: -10em;}.club{    position: absolute;    height: 100%;    width: 100%;    /* 设置3D转换 */    transform-style: preserve-3d;    transform: rotateX(-20deg) rotateY(-20deg);    /* 动画执行地方 */    -webkit-animation:aa 3s ease infinite;}.club div{    background-color:rgba(242, 231, 231, 1);    width:100px; height: 100px; border-radius: 10px;    position: absolute;    box-shadow:0 0 5em rgba(5, 65, 5, 0.2);}/* 分别创建骰子的六个面 */.front{    transform: translateZ(3em);    background-image: radial-gradient(35px at 50px 50px,#F80000,#BE0000 35px,transparent 36px);}.back{    transform: translateZ(-3em);    background-image: radial-gradient(11px at 30px 20px,#4C4C4C,#2F2F2F 11px,transparent 12px),    radial-gradient(11px at 65px 20px,#4C4C4C,#2F2F2F 11px,transparent 12px),    radial-gradient(11px at 30px 50px,#4C4C4C,#2F2F2F 11px,transparent 12px),    radial-gradient(11px at 30px 80px,#4C4C4C,#2F2F2F 11px,transparent 12px),    radial-gradient(11px at 65px 50px,#4C4C4C,#2F2F2F 11px,transparent 12px),    radial-gradient(11px at 65px 80px,#4C4C4C,#2F2F2F 11px,transparent 12px);}.left{    transform: rotateY(-90deg) translateZ(3em);    background-image: radial-gradient(12px at 25px 25px,#4C4C4C,#2F2F2F 12px,transparent 13px),    radial-gradient(12px at 25px 75px,#4C4C4C,#2F2F2F 12px,transparent 13px),    radial-gradient(12px at 75px 25px,#4C4C4C,#2F2F2F 12px,transparent 13px), radial-gradient(12px at 50px 50px,#F80000,#BE0000 12px,transparent 13px), radial-gradient(12px at 75px 75px,#4C4C4C,#2F2F2F 12px,transparent 13px);}.right{    transform: rotateY(90deg) translateZ(3em);    background-image: radial-gradient(17px at 25px 25px,#4C4C4C,#2F2F2F 17px,transparent 18px), radial-gradient(17px at 75px 75px,#4C4C4C,#2F2F2F 17px,transparent 18px);}.top{    transform: rotateX(90deg) translateZ(3em);    background-image: radial-gradient(12px at 25px 25px,#4C4C4C,#2F2F2F 12px,transparent 13px), radial-gradient(12px at 50px 50px,#4C4C4C,#2F2F2F 12px,transparent 13px), radial-gradient(12px at 75px 75px,#4C4C4C,#2F2F2F 12px,transparent 13px);}.buttom{    transform: rotateX(-90deg) translateZ(3em);    background-image: radial-gradient(12px at 25px 25px,#4C4C4C,#2F2F2F 12px,transparent 13px),    radial-gradient(12px at 25px 75px,#4C4C4C,#2F2F2F 12px,transparent 13px),    radial-gradient(12px at 75px 25px,#4C4C4C,#2F2F2F 12px,transparent 13px), radial-gradient(12px at 75px 75px,#4C4C4C
833b
,#2F2F2F 12px,transparent 13px);}/* 创建动画 */@-webkit-keyframes aa {    from{        transform: rotateX(0deg) rotateY(0) ;    }    to{         transform: rotateX(180deg) rotateY(360deg) ;    };}