css3preserve-3d实现环绕物体和动画效果

.index{.watchContainer{height:250px;.safeScore{位置：绝对；宽度：200px；高度：100%；文本对齐：居中；顶部边距：5px；顶部：9%；左：14%；视角：1000px；变换样式：保留3d；.dun{位置：绝对；左：50%；转换：translateX(-50%)translateZ(-100px);宽度：118px；高度：130px；z-指数：20；顶部：0px；动画：跳跃3秒无限；img{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；}}.mark,.level{位置：绝对；顶部：37%；左：50%；转换：translateX(-50%)；字体大小：14px；z-指数：3；字体粗细：粗体；颜色：#e6a23c；}.level{最高：56%；字体大小：12px；}h3{字体大小：12px；颜色：烟灰色；位置：绝对；顶部：22%；宽度：100px；左：50%；转换：translateX(-50%)；z-指数：3；}.mark{顶部：35%；左：50%；字体大小：25px；}.baseCircle{位置：绝对；变换：平移（-50%，-50%）旋转X（68度）；z-索引：0；左：50%；顶部：52%；宽度：100px；高度：114px；背景：url(./images/bgCircle.png)不重复；背景大小：100%100%；}.innerCircle,.outerCircle{位置：绝对；宽度：130px；高度：130px；顶部：0%；左：50%；转换：translateX(-50%)；}.outerCircle{左：50%；顶部：-18%；高度：170px；宽度：170px；}.swipCircle{宽度：200px；高度：200px；视角：250px；变换样式：保留3d；div{宽度：200px;填充：20px；顶部：-20px；高度：200px；边界半径：60%；边框：3px实心#4cc2ff；位置：绝对；动画：移动3s线性无限；}}}@keyframes移动{0%{top:-80px;变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(1);}25%{顶部：10px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(0.6);}75%{顶部：10px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(0.8);}100%{顶部：-80px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(1);}}.spin1{动画：旋转4s线性无限；}.spinreverse{动画：自旋5s线性无限反转；}@keyframesspin{from{transform:translateX(-50%)rotate(0deg);}to{转换：translateX(-50%)rotate(360deg);}}@keyframes跳跃{0%{顶部：0%；}50%{顶部：-5%；}100%{顶部：0%；}}}}直接在代码上实现效果.index{.watchContainer{height:250px;.safeScore{位置：绝对；宽度：200px；高度：100%；文本对齐：居中；顶部边距：5px；顶部：9%；左：14%；视角：1000px；变换样式：保留3d；.dun{位置：绝对；左：50%；转换：translateX(-50%)translateZ(-100px);宽度：118px；高度：130px；z-指数：20；顶部：0px；动画：跳跃3秒无限；img{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；}}.mark,.level{位置：绝对；顶部：37%；左：50%；转换：translateX(-50%)；字体大小：14px；z-指数：3；字体粗细：粗体；颜色：#e6a23c；}.level{最高：56%；字体大小：12px；}h3{字体大小：12px；颜色：烟灰色；位置：绝对；顶部：22%；宽度：100px；左：50%；转换：translateX(-50%)；z-指数：3；}.mark{顶部：35%；左：50%；字体大小：25px；}.baseCircle{位置：绝对；变换：平移（-50%，-50%）旋转X（68度）；z-索引：0；左：50%；顶部：52%；宽度：100px；高度：114px；背景：url(./images/bgCircle.png)不重复；背景大小：100%100%；}.innerCircle,.outerCircle{位置：绝对；宽度：130px；高度：130px；顶部：0%；左：50%；转换：translateX(-50%)；}.outerCircle{左：50%；顶部：-18%；高度：170px；宽度：170px；}.swipCircle{宽度：200px；高度：200px；视角：250px；变换样式：保留3d；div{宽度：200px;填充：20px；顶部：-20px；高度：200px；边界半径：60%；边框：3px实心#4cc2ff；位置：绝对；动画：移动3s线性无限；}}}@keyframes移动{0%{top:-80px;变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(1);}25%{顶部：10px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(0.6);}75%{顶部：10px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(0.8);}100%{顶部：-80px；变换：translate3d(0px,-30px,-25px)rotateX(68deg)scale(1);}}.spin1{动画：旋转4s线性无限；}.spinreverse{动画：自旋5s线性无限反转；}@keyframesspin{from{transform:translateX(-50%)rotate(0deg);}to{转换：translateX(-50%)rotate(360deg);}}@keyframes跳跃{0%{顶部：0%；}50%{顶部：-5%；}100%{顶部：0%；}}}}