transform-origin(变形原点) 怎么用

2020-05-13 09:37:50

transform(变形)和transform-origin(变形原点)的说明:

     目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为

     -webkit-transform,-moz-transform,-o-transform;

1、改变元素基点transform-origin

  • transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;

  •  

    因为我们元素默认基点就是其中心位置换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的

  • 但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在是中心位置,以达到你需要的基点位置。

  • 下面我们主要来看看其使用规则:

    transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,rightY和X一样除了百分值外还可以设置字符值top,center,bottom 。

    • 语法:-moz-transform-origin: [ | 

       | left | 

      center | 

      right ][ | 

       | top | 

      center | 

      bottom ] ?

    • transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;

    • top left | left top 等价于 0 0;

    • top | top center | center top 等价于 50% 0

    • right top | top right 等价于 100% 0

    • left | left center | center left 等价于 0 50%

    • center | center center 等价于 50% 50%(默认值)

    • right | right center | center right 等价于 100% 50%

    • bottom left | left bottom 等价于 0 100%

    • bottom | bottom center | center bottom 等价于 50% 100%

    • bottom right | right bottom 等价于 100% 100%

  

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

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;

如果只取一个值,表示垂直方向值不变

注:

transform-origin并不是transform中的属性值,他具有自己的语法。

但是他要结合transform才能起作用。

 


transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性,请查看这个演示.

x-axis

定义视图被置于 X 轴的何处。可能的值:

  • left

  • center

  • right

  • length

  • %

y-axis

定义视图被置于 Y 轴的何处。可能的值:

  • top

  • center

  • bottom

  • length

  • %

z-axis

定义视图被置于 Z 轴的何处。可能的值:

  • length

 

运行下方代码,你会有更清晰的认识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .a1{
                position: relatve;
                height: 200px;
                width: 80px;
                background: springgreen;
                border:1px solid black;    
                margin:100px 200px;
                color: white;
                font-size: 30px;
            }
            #b2{
                position: absolute;
                background: rgba(0,0,225,0.5);
                height: 200px;
                width: 80px;
                color: white;
                transform:rotate(70deg)
            }
                
            
        </style>
    </head>
    <body>
        <div class="a1">
            <div id="b2" style="transform-origin: left top;">左上</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: right top;">右上</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: center top;">中上</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: left bottom;">左下</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: left center;">左中</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: right top;">右上</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: right bottom;">右下</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin: bottom center;">下中</div>
        </div>
        <div class="a1">
            <div id="b2" style="transform-origin:center center;">中中</div>
        </div>
    </body>
</html>

效果图如下

 

 


  • 2019-06-06 17:57:57

    input【type="checkbox"】标签与字体对齐

    今天分享一个比较实用的技巧,在实际项目中我们会经常遇到表单的input标签多选和单选的问题,但是往往由于标签自身的样式和我们项目的风格很不搭调,就不能实现了,今天就来告诉大家怎么去实现吧。

  • 2019-06-10 11:54:52

    html.div禁用点击事件

    今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题。之前没有好好研究,于是决定仔细研究一下。

  • 2019-06-12 22:34:16

    PHP身份证号打星号

    一个很简单的问题,想把身份证的号生日的4位隐藏,一开始查函数居然没有看到,然后用了好几个函数处理,觉得太麻烦就上网搜,后来发现有一个函数就能直接处理,我居然没看到~~初学者~~

  • 2019-06-13 10:09:51

    java(Android)跨Module调用对应类方法需求解决方案

    在开发组件化项目中,遇到一个这样的问题,两个不同的Module相互之间没有任何直接依赖关系,现在需求是需要在Module_A中调用Module_B中的某个类的方法,以下为解决此问题的方法;

  • 2019-06-13 11:31:32

    Android Studio接入ARouter以及简单使用

    你可能会说如果我的A module依赖了 B module,那么只要在B里面配置是不是就可以了?绝对不行!无论module之间关系如何,必须要同样配置!包括主项目和library项目!

  • 2019-06-13 11:34:24

    Android组件化方案

    1为什么要项目组件化 2如何组件化 3组件化实施流程