使用css3写一个拆盲盒的动画

101 阅读1分钟

"```css @keyframes rotate { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

.box { width: 200px; height: 200px; position: relative; perspective: 1000px; }

.box .cover { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotate 3s infinite; }

.box .cover .front, .box .cover .back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; }

.box .cover .front { background-color: #ffcc00; transform: rotateY(0deg); }

.box .cover .back { background-image: url('path_to_image'); transform: rotateY(180deg); }

"