/* mycomponent/DTurntable/DTurntable.wxss */ .turntable { position: relative; width: inherit; height: inherit; transform: rotate(0deg); } .turntable-infinte { animation: rotate360deg 2s infinite linear; } @keyframes rotate360deg { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .turntable > canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; margin: auto; width: 510rpx; height: 510rpx; border-radius: 50%; overflow: hidden; } /* 转盘的装饰 - 内阴影 */ .turntable-canvas_inner-shadow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; margin: auto; width: 510rpx; height: 510rpx; box-shadow: 0 0 20rpx inset rgba(0, 0, 0, 0.3); border-radius: 50%; border: 5rpx solid #bd4c1d; } /* 装盘的奖品列表 */ .prize-list { position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 205rpx; height: 420rpx; text-align: center; transform: translateZ(0); transform-origin: center; } .price-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* transform-origin: center bottom; */ }