css 3d动画旋转

效果图:

<view class="bgm-icon">
				<view class="trans-tran" @click="toPlay(false)" v-if="isPlay">
					<u-icon name="/static/icon/bgM.png" size="30"></u-icon>
				</view>
				<view class="trans-tran" @click="toPlay(true)" v-else>
					<u-icon name="/static/icon/bgMn.png" size="30"></u-icon>
				</view>
			</view>

css:

.bgm-icon {
		position: fixed;
		top: 30rpx;
		right: 30rpx;
		.trans-tran{
			 transform-style: preserve-3d; /* 保持3D空间 */
			 perspective: 800px; /* 设置透视距离 */
			 transform: translateZ(100px);
			 animation: rotate 0.5s linear; /* 应用动画 */
		}
		@keyframes rotate {
		    from {
		        transform: rotateY(0deg);
		    }
		    to {
		        transform: rotateY(360deg);
		    }
		}
	}