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（旋转，平移，缩放，扭曲）及变换参考点的位置