css-2D變換-transform旋轉中心點

本文轉載自查看原文 2020-10-09 23:04 716 html&css

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 純CSS，多個半圓以中心點旋轉 U3D中攝像機繞屏幕中心點旋轉縮放平移指定變形中心點CSS3 html5 canvas圍繞中心點旋轉 html5 canvas圍繞中心點旋轉 CSS transform中的rotate的旋轉中心怎么設置 canvas實現矩形繞着中心點旋轉使用canvas繪制一個圍繞中心點旋轉的圓 css3 transform旋轉有3d效果【css】transform（旋轉，平移，縮放，扭曲）及變換參考點的位置