使用css3实现骰子动画

时间：2023-03-31 12:31:24 CSS

思路：骰子有6个面，然后创建6个div作为6个面，然后利用css3的rotation属性将每个面旋转到对应的位置，对其中的点使用绝对定位每个人脸位置。骰子旋转编写一个动画来改变旋转值。效果预览：https://leeseean.github.io/cs...。结构html：

css样式：body{background-color:darkkhaki;perspective:500px;}.diceWrap{position:relative;transform-style:preserve-3d;animation:rollinfinite10s;width:100px;height:100px;left:50%;top:200px;}.diceWrap>.dice{width:100px;height:100px;border-radius:10px;position:absolute;background-color:black;box-shadow:#D2D2D20px0px10px0pxinset;}.dice.dice1{transform:translateZ(50px);}.dice.dice1.inner{transform:translateZ(49px));}.dice.dice2{变换:rotateX(-180deg)translateZ(50px);}.dice.dice2.inner{变换:rotateX(-180deg)translateZ(49px);}.dice.dice3{变换：rotateX(90deg)translateZ(50px);}.dice.dice3.inner{变换：rotateX(90deg)translateZ(49px);}.dice.dice4{变换：rotateX(-90deg)translateZ(50px);}.dice.dice4.inner{变换：rotateX(-90deg)translateZ(49px);}.dice.dice5{变换：rotateY(90deg)translateZ(50px);}.dice.dice5.inner{变换：rotateY(90deg)translateZ(49px);}.dice.dice6{变换：rotateY(-90deg)translateZ(50px);}.dice.dice6.inner{变换：rotateY(-90deg)translateZ(49px);}.diceWrap>.dice>.dot{位置：绝对；宽度：20px；高度：20px；边界半径：50%；}.diceWrap>.dice1>.dot{左：50%；顶部：50%；左边距：-10px；边距顶部：-10px；背景色：红色；}.diceWrap>.dice2>.dot{背景颜色：橙色；}.diceWrap>.dice2>.dot:nth-child(1){左：5%；前5％;}.diceWrap>.dice2>.dot:nth-child(2){右：5%；底部：5%；}.diceWrap>.dice3>.dot{背景颜色：黄色；}.diceWrap>.dice3>.dot:nth-child(1){左：5%；前5％;}.diceWrap>.dice3>.dot:nth-child(2){左：50%；顶部：50%；左边距：-10px；边距顶部：-10px；}.diceWrap>.dice3>.dot:nth-child(3){右：5%；底部：5%；}.diceWrap>.dice4>.dot{背景颜色：绿色；}.diceWrap>.dice4>.dot:nth-child(1){左：5%；前5％;}.diceWrap>.dice4>.dot:nth-child(2){左：5%；底部：5%；}.diceWrap>.dice4>.dot:nth-child(3){右：5%；前5％;}.diceWrap>.dice4>.dot:nth-child(4){右：5%；底部：5%；}.diceWrap>.dice5>.dot{背景颜色：绿黄色；}.diceWrap>.dice5>.dot:nth-child(1){左：5%；前5％;}.diceWrap>.dice5>.dot:nth-child(2){左：5%；底部：5%；}.diceWrap>.dice5>.dot:nth-child(3){左：50%；顶部：50%；左边距：-10px；边距顶部：-10px；}.diceWrap>.dice5>.dot:nth-child(4){右：5%；前5％;}。diceWrap>.dice5>.dot:nth-child(5){右：5%；底部：5%；}.diceWrap>.dice6>.dot{背景颜色：紫色；}.diceWrap>.dice6>.dot:nth-child(1){左：5%；前5％;}.diceWrap>.dice6>.dot:nth-child(2){左：5%；底部：5%；}.diceWrap>.dice6>.dot:nth-child(3){左：5%；顶部：50%；边距顶部：-10px；}.diceWrap>.dice6>.dot:nth-child(4){右：5%；前5％;}.diceWrap>.dice6>.dot:nth-child(5){右：5%；顶部：50%；边距顶部：-10px；}.diceWrap>.dice6>.dot:nth-child(6){右：5%；底部：5%；}.diceWrap>.cover,.diceWrap>.inner{背景:rgb(65,65,65);盒子阴影：没有任何;}.diceWrap>.cover{边界半径：0；转换：translateZ(0px)；}.diceWrap>.cover.x{变换：rotateY(90deg);}.diceWrap>.cover.z{变换：rotateX(90deg);}@keyframesroll{0%{-webkit-transform:rotate3d(1,1,1,0deg)rotateY(0deg)scale3d(0.5,0.5,0.5);变换：rotate3d(1,1,1,0deg)rotateY(0deg)scale3d(0.5,0.5,0.5);}50%{-webkit-transform:rotate3d(1,1,1,deg)rotateY(360deg)scale3d(1,1,1);变换：旋转3d(1,1,1,360deg)旋转Y(360deg)scale3d(1,1,1);}100%{-webkit-transform:rotate3d(1,1,1,720deg)rotateY(720deg)scale3d(0.5,0.5,0.5);变换：rotate3d(1,1,1,720deg)rotateY(720deg)scale3d(0.5,0.5,0.5);}}使用js控制旋转结果：//动画配置开始letdiceWrap=document.querySelector('.diceWrap');//不同的开奖号码配置，不同的号码代表不同的开奖结果letkeyframes={'1':[{transform:'rotate3d(1,1,1,0deg)rotateX(-270deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateX(90deg)scale3d(1,1,1)'}],'2':[{transform:'rotate3d(1,1,1,0deg)rotateX(-90deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateX(270deg)scale3d(1,1,1)'}],'3':[{transform:'rotate3d(1,1,1,0deg)rotateY(0deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateY(360deg)scale3d(1,1,1)'}],'4':[{transform:'rotate3d(1,1,1,0deg)rotateX(-180deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateX(180deg)scale3d(1,1,1)'}],'5':[{transform:'rotate3d(1,1,1,0deg)rotateZ(-90deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateZ(270deg)scale3d(1,1,1)'}],'6':[{transform:'rotate3d(1,1,1,0deg)rotateZ(-270deg)scale3d(1,1,1)'},{transform:'rotate3d(1,1,1,360deg)rotateZ(90deg)scale3d(1,1,1)'}]}letanimationConfig={duration:200,iterations:10,fill:'forwards',//当动画完成时，保留最后一个属性值(在最后一个关键帧中定义）};//动画配置结束//旋转函数functionroll(number){lettimeout=null;让diceAnimate=diceWrap.animate(keyframes[number],animationConfig);让startTime=newDate().getTime();functionplaybackRate(){diceAnimate.playbackRate*=0.93;超时=设置超时（播放率，200）；如果（diceAnimate.playbackRate<=0.3）{console.log（12222）clearTimeout（超时）；}}回放率（）；}项目github地址https://github.com/leeseean/c...

上一篇：前端学习总结【103天】：CSS——两种不用JavaScript实现tab切换的方法

下一篇：CSS揭秘《灵活的背景定位》

使用css3实现骰子动画相关文章