css-2D变换-transform旋转中心点 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>中心点</title>
  <style>
    /*
            旋转中心点：transform-origin
                    transform-origin: 水平 垂直;
                        水平:left/center/right/具体像素值
                        垂直:top/center/bottom/具体像素值
    */
        #demo{
                width: 252px;
                height: 300px;
                border: 1px solid black;
                margin: 200px auto;
            }
            img{
                transition: 1s all linear;
                transform-origin:30px 30px;
            }
            #demo:hover img{
                transform: rotate(360deg);
            }
  </style>
</head>
<body>
  <div id="demo">
    <img src="../imgs/huge.jpg" alt="">
    <img src="../imgs/fengche.png" alt="">
    </div>
</body>
</html>

 

posted @ 2020-10-09 23:04  佳佳460  阅读(1263)  评论(0)  编辑  收藏  举报