css如何实现小球自转，求解答

我写的代码为啥图片不是围绕中心点转，我尝试了没怎么看懂，求解答

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #zhuan {
            transition: 10s linear 0s;
        }
        #zhuan:hover { 
            transform: rotate(36000deg);
        }
    style>
head>
<body>
    <div id="zhuan"><img src="img/音乐.png">div>
body>
html>

你这标签为啥都不是闭合的，div，body，html ，img，style等

css3 旋转动画 transform
https://blog.csdn.net/weixin_44198965/article/details/110181258