• transform-origin


    transform-origin:改变原点中心位置

    transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,transform-origin并不是transform中的属性值,他具有自己的语法。但是该属性只有在设置了transform属性的时候才能起作用。

    默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:

    CSS3 Transform——transform-origin

    在没有使用transform-origin改变元素中心点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

    如果想在不同的位置对元素进行这些操作,那么就可以使用transform-origin来对元素进行基点位置改变,使元素中心点不在是中心位置,达到需要的中心点位置。

    transform-origin(X,Y):

      transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,

          也可以是left,center,right水平方向取值,对应的百分值为left=0%;center=50%;right=100%,

          或者 top,center,bottom垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变

          

    • top left = left top = 0 0
    • left = left center = center left = 0或(0 50%)
    • bottom left = left bottom = 0 100%
    • top = top center = center top = 50% 0
    • center = center center = 50%或(50% 50%)
    • bottom = bottom center = center bottom = 50% 100%
    • right top = top right = 100% 0
    • right = right center = center right = 100%或(100% 50%)
    • bottom right = right bottom = 100% 100%

    CSS3 Transform——transform-origin

          left center = 0 50%

    CSS3 Transform——transform-origin

          left bottom = 0 100%

    CSS3 Transform——transform-origin

          top center = 50% 0

    CSS3 Transform——transform-origin

          center | center center = 50% 50%(默认值)

    CSS3 Transform——transform-origin

          center bottom = 50% 100%

    CSS3 Transform——transform-origin

          right top = 100% 0

    CSS3 Transform——transform-origin

          right center = 100% 50%

    CSS3 Transform——transform-origin

                     right bottom = 100% 100%

      CSS3 Transform——transform-origin

  • 相关阅读:
    P4318 完全平方数 [二分答案+容斥+莫比乌斯函数]
    P2522 [HAOI2011]Problem b
    莫比乌斯反演学习笔记
    UVALive646 Deranged Exams [容斥+排列组合]
    HDU5514 Frogs [容斥(II)]
    P2567 [SCOI2010]幸运数字 [容斥+有技巧的搜索]
    微信api退款操作
    类中或者是程序集中,根据虚拟路径获取绝对路径
    加载程序集中内嵌资源
    .NET Framework 框架简述01
  • 原文地址:https://www.cnblogs.com/coldfishdt/p/6206105.html
Copyright © 2020-2023  润新知