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>

效果图如下

 

 


  • 2020-04-17 10:42:29

    (三)TweenMax运动效果

    运动效果 实例化对象.set() 立刻运动到指定地点,不用加时间

  • 2020-04-17 11:19:55

    Vue中的is和操作DOM

    vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样

  • 2020-04-17 11:27:48

    TweenMax中文初级教程一

    TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

  • 2020-04-17 11:28:35

    TweenMax中文初级教程二

    TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具,可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单,避免了通过反复delay和回调进行动画。 作者:李霖弢 链接:https://www.jianshu.com/p/8c0361e43bf5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词:CSS(一般可以省略) CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做动画:

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

  • 2020-04-17 14:06:29

    图片解释EaseIn,EaseOut,EaseInOut

    1.EaseIn:即缓动发生在入口处,也就是刚开始的时候。 2.EaseOut:即缓动发生在出口处,也就是结束之前。 3.EaseInOut:就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键