JS实现简单随机3D骰子

2023-08-10 10:47:04 82

@keyframesrotate{ to{ transform:rotateX(360deg)rotateY(360deg); } } @keyframesdomo{ 20%{ transform:rotateX(20deg); } 60%{ transform:rotateX(20deg)rotateY(200deg); } 100%{ transform:rotateX(100deg)rotateY(1000deg)rotateZ(-100deg); } } .dice{ width:300px; height:300px; margin:100pxauto200px; position:relative; transform-style:preserve-3d; /*animation:rotate2s;*/ animation-duration:3s; animation-timing-function:linear; transition:all1s; } .dice:hover{ animation:domo5slinear0sinfinitealternate; } .dice.face{ width:100%; height:100%; display:flex; position:absolute; left:0; top:0; border:1pxsolid#000; background:rgb(253,250,250); border-radius:20px; font-size:100px; color:#fff; line-height:300px; text-align:center; } .item1{ width:100px; height:100px; background:red; border-radius:50%; } .item2{ width:75px; height:75px; background:blue; border-radius:50%; } .item3{ width:75px; height:75px; background:blue; border-radius:50%; } .item4{ width:75px; height:75px; background:rgb(240,54,54); border-radius:50%; } .item5{ width:75px; height:75px; background:blue; border-radius:50%; } .item6{ width:75px; height:75px; background:blue; border-radius:50%; } .face:nth-child(1){ justify-content:center; align-items:center; transform:translateZ(150px); } .face:nth-child(2){ justify-content:space-around; align-items:center; transform:rotateX(-90deg)translateZ(150px); } .face:nth-child(3){ justify-content:space-around; align-items:center; flex-wrap:wrap; transform:rotateY(90deg)translateZ(150px); } .face:nth-child(4){ flex-wrap:wrap; justify-content:center; align-items:center; transform:rotateY(-90deg)translateZ(150px); } .face:nth-child(4).face_0{ width:300px; height:75px; display:flex; justify-content:space-around; } .face:nth-child(5){ flex-wrap:wrap; justify-content:center; align-items:center; transform:rotateX(90deg)translateZ(150px); } .face:nth-child(5).face_0{ width:300px; height:75px; display:flex; justify-content:space-around; } .face:nth-child(6){ flex-wrap:wrap; justify-content:center; align-items:center; transform:translateZ(-150px); } .face:nth-child(6).face_0{ width:300px; height:75px; display:flex; justify-content:space-around; } p{ text-align:center; }

JS实现简单随机3D骰子

热门推荐

随机推荐