当前位置 博文首页 > 文章内容

    尤里卡_1006 (胡健)的博客:CSS3中设置元素转换中心点

    作者:shunshunshun18 栏目:未分类 时间:2021-10-17 20:44:42

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    首先给一个div盒子作为研究对象,然后给盒子定义属性,代码如下:

     div {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                transition: all 1s;
          }
    

    备注:
    margin: 100px auto; 这句代码是让盒子居中显示
    以上代码确定的旋转中心是100px auto;,意思是旋转中心的位置是水平方向的中心和竖直方向离顶100px的距离处(水平居中,竖直离顶100px)。
    我们自己定义旋转中心的位置,通过transform-origin来实现,以下讲解transform-origin的用法:
    transform-origin: 可以接方位名词,例如transform-origin: left bottom; ,其意思是旋转中心位于盒子的左下顶点。
    transform-origin: 一般情况下默认接的是50% 50% 等价于center center(中心点),也可以接px像素,例如transform-origin: 50px 50px;,其意思是旋转中心在坐标为(50px,50px)的地方。

    cs