zoukankan html css js c++ java

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>

查看全文

相关阅读:
keepass
gpg
Wireshark实践
 ssh
namp
第十二周
 第十一周
 第十周总结
 第九周学习总结
 编程语言

原文地址：https://www.cnblogs.com/jia460/p/13789439.html