2d旋转原点的转换

fishssss

已于 2022-12-28 23:06:00 修改

阅读量290

点赞数

文章标签： html5 css3

于 2022-10-06 17:54:48 首次发布

本文链接：https://blog.csdn.net/minnyYu/article/details/127185525

版权

旋转的元素默认的旋转原点是元素的中心点，想要更改旋转原点，需要用到transform-origin属性，给元素本身添加。

语法：transform-origin：原点水平位置原点垂直位置；

中间需要空格隔开。

取值有三种：1、方位名词，如left、center、right，top、bottom

2、像素值：px

3、百分比，参考元素自身尺寸的百分比

img {
            
            transition: all 1s;
            /* 百分比改变旋转中心 */
            transform-origin: 50% 100%;
            /* 像素值 */
            transform-origin: 200px 100px;
            /* 方位名词 */
            transform-origin: right top;
        }
        .box:hover img {
            transform: rotate(2turn);
        }

百分比50%为水平方向像右移动自身宽度的一半，100%为垂直方向向下移动到底部，这时底部中心为旋转原点