旋转的硬币效果
{
外层wrap结构：
html部分是外层盒子通过绝对定位将布局设置为水平竖直居中，采用绝对定位以及margin负方向各一半的方法,设置内部的transform-style为-preserve-3d以及指定keyframes动画和动画的时间、轨迹、方式等参数。
内部结构：
硬币由三层结构组成：表面、背面、内部填充
表面和背面用不同的background-image背景
内部则随意选用任意的一个背景，它们设置width和height相同，且除了一面外其他都是绝对定位，多个填充部分由属性transform:translateZ(npx)的不同值来设置Z轴方向的重叠关系。
动画@keyframs my_rotateY使整体盒子进行环绕Y轴的无限转动
设置为基础为两帧的动画，分别是:
0%：transform rotateY(0deg)
100%：transform rotateY(360deg)
}
代码如下
HTML部分:
CSS部分：
#wrap{
width:150px;
height:150px;
margin-left:-75px;
margin-top:-75px;
position:absolute;
top:50%;
left:50%;
transform-style:preserve-3d;
animation:my_rotateY 3s linear infinite;
}
@keyframes my_rotateY{
0%{
transform:rotateY(0deg);
}
100%{
transform:rotateY(360deg);
}
}
.back{ //硬币背面
background-image : url(‘/bei.png’)
width:150px;
height:150px;
}
.back{ //硬币正面
background-image : url(‘/zheng.png’)
width:150px;
height:150px;
position:absolute;
top:0;
transform:translateZ(10px);
}
.mid{ //硬币内部填充–每一层实际厚度由对应html内style设置
background-image : url(‘/zheng.png’)
width:150px;
height:150px;
position:absolute;
top:0;
transform:translateZ(1px);
}