用css实现一个硬币旋转的效果
参考回答:
#euro { width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; animation: spin 2.5s linear infinite; } .back { background-image: url("/uploads/160101/backeuro.png"); width: 150px; height: 150px; } .middle { background-image: url("/uploads/160101/faceeuro.png"); width: 150px; height: 150px; transform: translateZ(1px); position: absolute; top: 0; } .front { background-image: url("/uploads/160101/faceeuro.png"); height: 150px; position: absolute; top: 0; transform: translateZ(10px); width: 150px; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }