<!DOCTYPE html> <html> <head> <title>rotate</title> <style type="text/css"> * { margin: 0px; padding: 0px; box-sizing: border-box; border: none; } body { margin: 0; padding: 0; } @keyframes spin { /*transform: rotateX(50deg);*/ 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .inner { width: 100%; height: 100%; border-radius: 50%; background-color: #FF00FF; overflow: hidden; } .inner img { width: 100%; height: 100%; border-radius: 50%; -webkit-filter: blur(1px); transition-delay: 0.5s; transition: all 0.001s ease-in-out; } .out { width: 210px; height: 210px; border: 1px dashed red; border-radius: 50%; padding: 5px; margin: 250px auto; transform:rotateX(85deg); /*transform-origin:center;*/ } .roll{ animation: spin 6s linear infinite; width: 100%; height: 100%; } .inner:hover img { transform: scale(1.1, 1.1); -webkit-filter: blur(0px); } </style> </head> <body> <div class="out "> <div class="roll"> <div class="inner"> <img src="1.jpg"> </div></div> </div> </body> </html>