transform_transformer - CSDN
transform 订阅
transform是一个函数命令,应用于指定范围的每个元素。 展开全文
transform是一个函数命令,应用于指定范围的每个元素。
信息
类    别
函数
作    用
应用于指定范围的每个元素
来    源
标准库
外文名
transform
transform解释
标准库 中的 transform
收起全文
  • transform的使用:

    千次阅读 2019-04-12 11:05:09
    transform属性 可以使元素进行缩放、平移、旋转等2D、3D的变换 语法: transform: none/transform-function; 参数: translate(x,y) 定义2D转换,表示在x轴和y轴上进行平移 translate3d(x,y,z) 定义3D转换 ...

    transform属性 可以使元素进行缩放、平移、旋转等2D、3D的变换

    语法:

    transform: none/transform-function;

    参数:

    translate(x,y)     定义2D转换,表示在x轴和y轴上进行平移

    translate3d(x,y,z)      定义3D转换

    translateX(x)    表示在x轴上进行平移

    translateY(y)     表示在y轴上进行平移

    translateZ(z)     表示在z轴上进行平移

    rotate(deg)      表示旋转一定角度,正时针旋转角度为正直,逆时针旋转角度为负值

    rotate3d(x,y,z,deg)      3D转换

    rotateX(angle)     3D转换,表示绕x轴旋转多少度

    rotateY(angle)      3D转换,表示绕y轴旋转多少度

    rotateZ(abgle)       3D转换,表示绕Z轴旋转多少度

    scale(x-angle,y-angle)      2D转换,表示缩放,在x轴和y轴上扩大多少倍。x值和y值 表示倍数,若值小于1 表示缩小

    scaleX(angle)     表示在x轴上扩大多少倍

    scaleY(angle)     表示在y轴上扩大多少倍

    skew(x-angle,y-angle)      表示在x轴和y轴上分别倾斜的度数

    skewX(x)      2D转换,表示在x轴上倾斜的度数

    skewY(y)      2D转换,表示在y轴上倾斜的度数

    matrix(n,n,n,n,n,n)     定义2D转换,表示使用6个值得矩阵进行变换

    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,)    定义3D转换,表示使用16个值的4x4转换

    none                   表示不进行转换

     

    接下来有个transform-origin:

    用来设置被改变元素的中心位置,经常用于旋转中,要设置旋转中心。其值是具体的度数数值,值可以为正值或负值,为正值表示正向旋转,为负值表示逆向旋转。2D和3D都可使用

    语法:

    transform-origin:x y z;

    x            定义视图被置于x轴何处,

                 可能的值:left/center/right/length/%

    y            定义视图被置于Y轴的何处 

                  可能的值:top/center/bottom/length/%

    z             定义视图被置于z轴何处

                   可能的值: length

    展开全文
  • CSS3transform属性详解

    千次阅读 2020-02-15 12:52:11
    Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放...

    Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。

    语法:

    transform : none |[]* 也就是: transform: rotate | scale | skew | translate |matrix;

    none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

    取值:

    transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ,他有几个属性值参数:rotate;translate;scale;skew;matrix。下面我们分别来介绍这几个属性值参数的具体使用方法:

    一、旋转rotate

    rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):

    二、移动translate

    移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动),具体使用方法如下:

    1、translate([, ]) :通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

    2、translateX() : 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置。如:transform:translateX(100px):

    3、translateY() :通过给定Y方向的数目指定一个translation。只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置。如:transform:translateY(20px):

    三、缩放scale

    缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。下面我们具体来看看这三种情况具体使用方法:

    1、scale([, ]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5):

    2、scaleX() : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。如:transform:scaleX(2):

    3、scaleY() : 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点。如transform:scaleY(2):

    四、扭曲skew

    扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用如下:

    1、skew( [, ]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。如:transform:skew(30deg,10deg):

    2、skewX() : 按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。如:transform:skewX(30deg)

    3、skewY() : 按给定的角度沿Y轴指定一个skew transformation(斜切变换)。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如:transform:skewY(10deg)

    五、矩阵matrix

    matrix(, , , , , ) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法,这里就不多说了。

    改变元素基点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,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样;下面我列出他们相对应的写法:

    1、top left | left top 等价于 0 0 | 0% 0%

    2、top | top center | center top 等价于 50% 0

    3、right top | top right 等价于 100% 0

    4、left | left center | center left 等价于 0 50% | 0% 50%

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

    6、right | right center | center right 等价于 100% 50%

    7、bottom left | left bottom 等价于 0 100% | 0% 100%

    8、bottom | bottom center | center bottom 等价于 50% 100%

    9、bottom right | right bottom 等价于 100% 100%

    其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例

    (1)transform-origin:(left,top):

    (2)transform-origin:right

    (3)transform-origin(25%,75%)

    更多的改变中心基点办法,大家可以在本地多测试一下,多体会一下,这里还要提醒大家一点的是,transform-origin并不是transform中的属性值,他具有自己的语法,前面我也说过了,说简单一点就是类似于我们的background-position的用法,但又有其不一样,因为我们background-position不需要区别浏览器内核不同的写法,但transform-origin跟其他的css3属性一样,我们需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:

    //Mozilla内核浏览器:firefox3.5±moz-transform-origin: x y;//Webkit内核浏览器:Safari and Chrome-webkit-transform-origin: x y;//Opera-o-transform-origin: x y ;//IE9-ms-transform-origin: x y;//W3C标准transform-origin: x y ;

    transform在不同浏览器内核下的书写规则

    //Mozilla内核浏览器:firefox3.5±moz-transform: rotate | scale | skew | translate ;//Webkit内核浏览器:Safari and Chrome-webkit-transform: rotate | scale | skew | translate ;//Opera-o-transform: rotate | scale | skew | translate ;//IE9-ms-transform: rotate | scale | skew | translate ;//W3C标准transform: rotate | scale | skew | translate ;

    上面列出是不同浏览内核transform的书写规则,如果需要兼容各浏览器的话,以上写法都需要调用。

    支持transform浏览器

    同样的transform在IE9下版本是无法兼容的,之所以有好多朋友说,IE用不了,搞这个做什么?个人认为,CSS3推出来了,他是一门相对前沿的技术,做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术,如果要等到所有浏览器兼容,那我们只能对css3说NO,我用不你。因为IE老大是跟不上了,,,,纯属个人观点,不代表任何。还是那句话,感兴趣的朋友跟我一样,不去理会IE,我们继续看下去。

    在上面我们详细介绍了CSS3中transform的各种属性值的设置以及其各自的参数,下面我们通过一个实例来看看每一种属性值的使用,为了节约空间和大家的时间,我们后面的实例都是在这个html基础上实现,主要是我们在下面的菜单中的a:hover中分别使用不同的transform的设置,换句话说,当你移动到链接上时,相应的每一个菜单项有不同的变化,因为我们在每个菜单中使用了transform。具体每一步我们可以看下面的实例:

    HTML Code:

    TranslateTranslateXTranslateYRotateScaleScaleXScaleYSkewSkewXSkewYMatrix

    为了效果更好一点,我们给上面的导航菜单加上一点CSS样式:

    .menuul{border-top:15px solid black;padding:010px;}.menuullia{color:#fff;float:left;margin:05px;font-size:14px;height:50px;line-height:50px;text-align:center;width:65px;padding:10px5px;background:#151515;-moz-border-radius:005px5px;-webkit-border-radius:005px5px;border-radius:005px5px;-moz-box-shadow:001px#ccc,inset002px#fff;-webkit-box-shadow:001px#ccc,inset002px#fff;box-shadow:001px#ccc,inset002px#fff;text-shadow:01px1px#686868;text-decoration:none;}.menuulli.translatea{background:#2EC7D2;}.menuulli.translate-xa{background:#8FDD21;}.menuulli.translate-ya{background:#F45917;}.menuulli.rotatea{background:#D50E19;}.menuulli.scalea{background:#cdddf2;}.menuulli.scale-xa{background:#0fDD21;}.menuulli.scale-ya{background:#cd5917;}.menuulli.skewa{background:#519;}.menuulli.skew-xa{background:#D50;}.menuulli.skew-ya{background:#E19;}.menuulli.matrixa{background:#919;}

    在这里我们使用了一些前面所进的CSS3的属性制作出来的导航,如果你跟着做的话,在你本地一定能看到一个非常靓丽的导航菜单,这里由于无法链接demo原页面,只好贴上缩略图,让大家有一个初步效果视觉初步的效果如下:

    从效果图上我们可以清楚的看到菜单上我们分别对应的是transform中的Translate、TranslateX、TranslateY、Rotate、Scale、ScaleX、ScaleY、Skew、SkewX、SkewY和Matrix,下面我们就在相应的a:hover加上各自的效果:

    1、transform:translate(x,y):

    .menuulli.translatea:hover{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px, -10px);transform:translate(-10px,-10px);}

    效果:

    2、transform:translateX(x)

    .menuulli.translate-xa:hover{-moz-transform:translateX(-10px);-webkit-transform:translateX(-10px);-o-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);}

    效果:

    3、transform:translateY(y)

    .menuulli.translate-ya:hover{-moz-transform:translateY(-10px);-webkit-transform:translateY(-10px);-o-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);}

    效果:

    4、transform:rotate(角度值)

    .menuulli.rotatea:hover{-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}

    效果:

    5、transform:scale(x,y)

    .menuulli.scalea:hover{-moz-transform:scale(0.8,0.8);-webkit-transform:scale(0.8,0.8);-o-transform:scale(0.8,0.8);-ms-transform:scale(0.8,0.8);transform:scale(0.8,0.8);}

    效果:

    6、transform:scaleX(x)

    .menuulli.scale-xa:hover{-moz-transform:scaleX(0.8);-webkit-transform:scaleX(0.8);-o-transform:scaleX(0.8);-ms-transform:scaleX(0.8);transform:scaleX(0.8);}

    效果:

    7、transform:scaleY(y)

    .menuulli.scale-ya:hover{-moz-transform:scaleY(1.2);-webkit-transform:scaleY(1.2);-o-transform:scaleY(1.2);-ms-transform:scaleY(1.2);transform:scaleY(1.2);}

    效果:

    8、transform:skew(x,y)

    .menuulli.skewa:hover{-moz-transform:skew(45deg,15deg);-webkit-transform:skew(45deg,15deg);-o-transform:skew(45deg,15deg);-ms-transform:skew(45deg,15deg);transform:skew(45deg,15deg);}

    效果:

    9、transform:skewX(x)

    .menuulli.skew-xa:hover{-moz-transform:skewX(-30deg);-webkit-transform:skewX(-30deg);-o-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg);}

    效果:

    10、transform:skewY(y)

    .menuulli.skew-ya:hover{-moz-transform:skewY(30deg);-webkit-transform:skewY(30deg);-o-transform:skewY(30deg);-ms-transform:skewY(30deg);transform:skewY(30deg);}

    效果:

    11、transform:matrix(a,b,c,d,e,f)

    .menuulli.matrixa:hover{-moz-transform:matrix(1,1,-1,0,0,0);-webkit-transform:matrix(1,1,-1,0,0,0);-o-transform:matrix(1,1,-1,0,0,0);-ms-transform:matrix(1,1,-1,0,0,0);transform:matrix(1,1,-1,0,0,0);}

    效果:

    transform中的matrix是相对的复杂,如果感兴趣的朋友可以点这里进去学民更多有关于Matrix的用法,我在这里就不多说了,说了也讲不清楚。

    下面我们来看看最终的效果图,如果你在本地跟着这个实例做了的话,那么你就能看到非常好的效果了。

    上面的实例效果展示了有关于transform中各种风格效果,这里需要提醒大家,我们上面的效果都是以元素自身的中心点为基点的,下面我们来看一个改变元素基点的实例

    我们在前面的实例基础改变一下所有a标签基点位置为left top(前面默认是center center)

    .menuulli.transform-origina{-moz-transform-origin:left top;-webkit-transform-origin:left top;-o-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;}

    大家一起看看改变了a标签基点后transform下各种效果有什么样的变化:

    从效果图中大家可以明显的看出,改变元素的基点后。元素进行transform任何属性值的设置都会有影响,换句话说,我们transform进行任何动作变化都是以元素的中心为基点,同时我们可以通过transform-origin来改变任何元素的基点,从而达到不同的效果。感兴趣的朋友可以去了解更多有关这方面的知识。

    最后我们再来看一个transform运用多个属性值的效果实例

    .demoa{width:100px;padding:5px;background:red;display:block;}.demoa:hover{-moz-transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);-webkit-transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);-o-transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);-ms-transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);transform:rotate(45deg)scale(0.8,1.2)skew(60deg,-30deg);}

    这里需要注意的是使用多个属性值时,其之间不能用逗号(“,”)分隔,必须使用空格分隔,记住了是空格分隔,如上面代码所示。

    PS:更多前端资讯、技术干货,请关注公众号「前端新视界」,后台回复 “1” 获取100本PDF前端电子书
    回复 “2” 获取小编精选的Python编程电子书

    前端新视界

    展开全文
  • 今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transformTransform字面上就是...

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform)转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。

    Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate扭曲skew缩放scale移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。

    语法:

    transform : none | [ ]* 也就是: transform: rotate | scale | skew | translate |matrix;

    none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

    取值:

    transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:rotate;translate;scale;skew;matrix。下面我们分别来介绍这几个属性值参数的具体使用方法:

    一、旋转rotate

    rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):

    二、移动translate

    移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动),具体使用方法如下:

    1、translate([, ]) :通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

    2、translateX() : 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置。如:transform:translateX(100px):

    3、translateY() :通过给定Y方向的数目指定一个translation。只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置。如:transform:translateY(20px):

    三、缩放scale

    缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。下面我们具体来看看这三种情况具体使用方法:

    1、scale([, ]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5):

    2、scaleX() : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。如:transform:scaleX(2):

    3、scaleY() : 使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点。如transform:scaleY(2):

    四、扭曲skew

    扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用如下:

    1、skew( [, ]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。,其中第二个参数是可选参数,如果没有设置第二个参数,那么X轴和Y轴以同样的角度进行变形。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。如:transform:skew(30deg,10deg):

    2、skewX() : 按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。如:transform:skewX(30deg)

    3、skewY() : 按给定的角度沿Y轴指定一个skew transformation(斜切变换)。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如:transform:skewY(10deg)

    五、矩阵matrix

    matrix(, , , , , ) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法,这里就不多说了。

    改变元素基点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,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样;下面我列出他们相对应的写法:

    1、top left | left top 等价于 0 0 | 0% 0%

    2、top | top center | center top 等价于 50% 0

    3、right top | top right 等价于 100% 0

    4、left | left center | center left 等价于 0 50% | 0% 50%

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

    6、right | right center | center right 等价于 100% 50%

    7、bottom left | left bottom 等价于 0 100% | 0% 100%

    8、bottom | bottom center | center bottom 等价于 50% 100%

    9、bottom right | right bottom 等价于 100% 100%

    其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例

    (1)transform-origin:(left,top):

    (2)transform-origin:right

    (3)transform-origin(25%,75%)

    更多的改变中心基点办法,大家可以在本地多测试一下,多体会一下,这里还要提醒大家一点的是,transform-origin并不是transform中的属性值,他具有自己的语法,前面我也说过了,说简单一点就是类似于我们的background-position的用法,但又有其不一样,因为我们background-position不需要区别浏览器内核不同的写法,但transform-origin跟其他的css3属性一样,我们需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:

    //Mozilla内核浏览器:firefox3.5+ -moz-transform-origin: x y; //Webkit内核浏览器:Safari and Chrome -webkit-transform-origin: x y; //Opera -o-transform-origin: x y ; //IE9 -ms-transform-origin: x y; //W3C标准 transform-origin: x y ;

    transform在不同浏览器内核下的书写规则

    //Mozilla内核浏览器:firefox3.5+ -moz-transform: rotate | scale | skew | translate ; //Webkit内核浏览器:Safari and Chrome -webkit-transform: rotate | scale | skew | translate ; //Opera -o-transform: rotate | scale | skew | translate ; //IE9 -ms-transform: rotate | scale | skew | translate ; //W3C标准 transform: rotate | scale | skew | translate ;

    上面列出是不同浏览内核transform的书写规则,如果需要兼容各浏览器的话,以上写法都需要调用。

    支持transform浏览器

    同样的transform在IE9下版本是无法兼容的,之所以有好多朋友说,IE用不了,搞这个做什么?个人认为,CSS3推出来了,他是一门相对前沿的技术,做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术,如果要等到所有浏览器兼容,那我们只能对css3说NO,我用不你。因为IE老大是跟不上了,,,,纯属个人观点,不代表任何。还是那句话,感兴趣的朋友跟我一样,不去理会IE,我们继续看下去。

    在上面我们详细介绍了CSS3中transform的各种属性值的设置以及其各自的参数,下面我们通过一个实例来看看每一种属性值的使用,为了节约空间和大家的时间,我们后面的实例都是在这个html基础上实现,主要是我们在下面的菜单中的a:hover中分别使用不同的transform的设置,换句话说,当你移动到链接上时,相应的每一个菜单项有不同的变化,因为我们在每个菜单中使用了transform。

    展开全文
  • Transform详解

    2020-08-18 20:21:22
    1、Transform简介 Transformer中抛弃了传统的CNN和RNN,整个网络结构完全是由Attention机制组成。更准确地讲,Transformer由且仅由self-Attenion和Feed Forward Neural Network组成。一个基于Transformer的可训练的...

    目录

    1、Transform简介

    2、Transform结构

    3、Transform encoder过程

    4、Attention

    5、Self-Attention

    5.1、self-Attention细节描述  

    5.2、矩阵运算过程描述

    6、Multi-Head Attention  

    7、Transform的encoder整体结构

    8、自注意机制的复杂度

    9、Positional Encoding

    10、残差模块和Layer normalization

    10.1、残差引入目的

    10.2、Normalization引入目的

    11、Decoder层

    11.1、Mask

    11.2、Padding Mask

    11.3、Sequence mask

    11.4、解码过程

    12、输出层

    13、 优缺点总结


    1、Transform简介

    Transformer中抛弃了传统的CNNRNN,整个网络结构完全是由Attention机制组成。更准确地讲,Transformer由且仅由self-AttenionFeed Forward Neural Network组成。一个基于Transformer的可训练的神经网络可以通过堆叠Transformer的形式进行搭建,作者的实验是通过搭建编码器和解码器各6层,总共12层的Encoder-Decoder,并在机器翻译中取得了BLEU值得新高。

    2、Transform结构

    Transformer的实验基于机器翻译

    Transform本质是Encoder-Decoder的结构

    论文中所设置的,编码器由6个编码block组成,同样解码器是6个解码block组成。与所有的生成模型相同的是,编码器的输出会作为解码器的输入,如图3所示:

    我们继续分析每个encoder的详细结构:在Transformerencoder中,数据首先会经过一个叫做‘self-attention’的模块得到一个加权之后的特征向量 Z ,这个Z 便是论文公式1中的  Attention(Q,K,V)

    得到的Z,会被送到encoder的下一个模块,Feed Forward Neural Network,这个全连接有两层,第一层的激活函数是ReLU,第二层是一个线性激活函数,可以表示为:

    Decoder的结构如图5所示,它和encoder的不同之处在于Decoder多了一个Encoder-Decoder Attention,两个Attention分别用于计算输入和输出的权值: 

    1. Self-Attention:当前翻译和已翻译的前文之间的关系;
    2. Encoder-Decnoder Attention:当前翻译和编码的特征向量之间的关系。

    3Transform encoder过程

    首先将词通过word2vec表示为向量,第一层encoder的输入直接为词x的向量表示,而在其他层中,输入则是上一个block的输出。如下图所示:

    4、Attention

    Attention模型并不只是盲目地将输出的第一个单词与输入的第一个词对齐。Attention机制的本质来自于人类视觉注意力机制。人们在看东西的时候一般不会从到头看到尾全部都看,往往只会根据需求观察注意特定的一部分,就是一种权重参数的分配机制,目标是协助模型捕捉重要信息。即给定一组<key,value>,以及一个目标(查询)向量query,attention机制就是通过计算query与每一组key的相似性,得到每个key的权重系数,再通过对value加权求和,得到最终attention数值。

    5、Self-Attention

    5.1、self-Attention细节描述  

    Self-Attention是Transformer最核心的内容,其核心内容是为输入向量的每个单词学习一个权重

    self-attention中,每个单词有3个不同的向量,它们分别是Query向量( Q ),Key向量( K)和Value向量( V ),长度均是64。它们是通过3个不同的权值矩阵由嵌入向量 X 乘以三个不同的权值矩阵 WQWK  WV  得到,其中三个矩阵的尺寸也是相同的。均是 512*64;Q,K,V这些向量的概念是很抽象,但是它确实有助于计算注意力。相较于RNNs,transformer具有更好的并行性。

    1. 如上文,将输入单词转化成嵌入向量;
    2. 根据嵌入向量得到 q ,k,v 三个向量;
    3. 为每个向量计算一个score score=q*k 
    4. 为了梯度的稳定,Transformer使用了score归一化,即除以  sqrt(dk)=8 (论文中使用key向量的维度是64维,其平方根=8,这样可以使得训练过程中具有更稳定的梯度。)
    5. score施以softmax激活函数,使得最后的列表和为1这个softmax的分数决定了当前单词在每个句子中每个单词位置的表示程度。很明显,当前单词对应句子中此单词所在位置的softmax的分数最高,但是,有时候attention机制也能关注到此单词外的其他单词,这很有用。
    6. softmax点乘Value v ,得到加权的每个输入向量的评分 v ;相当于保存对当前词的关注度不变的情况下,降低对不相关词的关注。
    7. 相加之后得到最终的输出结果  ;这会在此位置产生self-attention层的输出(对于第一个单词)。

    5.2、矩阵运算过程描述

    6、Multi-Head Attention  

    Multi-Head Attention相当于 h 个不同的self-attention的集成(ensemble),在这里我们以 h=8 举例说明。Multi-Head Attention的输出分成3步:

       1、将数据 X 分别输入到5章节所示的8self-attention中,得到8个加权后的特征矩阵 

       2、将8个  按列拼成一个大的特征矩阵;前馈神经网络没法输入8个矩阵,所以需要把8个矩阵降为1个,在这里通过把8个矩阵连在一起。

       3、特征矩阵经过一层全连接后得到输出 Z 

    具体过程如下:

    7、Transform的encoder整体结构

    在self-attention需要强调的最后一点是其采用了残差网络 中的short-cut结构,目的当然是解决深度学习中的退化问题。FFN 相当于将每个位置的Attention结果映射到一个更大维度的特征空间,然后使用ReLU引入非线性进行筛选,最后恢复回原始维度。

    8、自注意机制的复杂度

    对于使用自注意力机制的原因,论文中提到主要从三个方面考虑(每一层的复杂度,是否可并行长距离依赖学习),并给出了和RNN,CNN计算复杂度的比较。可以看到,如果输入序列n小于表示维度d的话,每一层的时间复杂度self-attention是比较有优势的。当n比较大时,作者也给出了一种解决方案self-attention(restricted)即每个词不是和所有词计算attention,而是只与限制的r个词去计算attention。在并行方面,多头attention和CNN一样不依赖于前一时刻的计算,可以很好的并行,优于RNN。在长距离依赖上,由于self-attention是每个词和所有词都要计算attention,所以不管他们中间有多长距离,最大的路径长度也都只是1。可以捕获长距离依赖关系。

    9、Positional Encoding

    transformer给encoder层和decoder层的输入添加了一个额外的向量Positional Encoding,维度和embedding的维度一样,这个向量采用了一种很独特的方法来让模型学习到这个值,这个向量能决定当前词的位置,或者说在一个句子中不同的词之间的距离。计算方法如下

    其中pos是指当前词在句子中的位置,i是指向量中每个值的index,可以看出,在偶数位置,使用正弦编码,在奇数位置,使用余弦编码。最后把这个Positional Encoding与embedding的值相加,作为输入送到下一层。

    eg:嵌入维度为4,考虑位置编码的情况如下:

    在这里插入图片描述

    10、残差模块和Layer normalization

    在transformer中,每一个子层(self-attetion,ffnn)之后都会接一个残差模块,并且有一个Layer normalization;

    eg: 2个Encoder和2个Decoder的Transformer:

    10.1、残差引入目的

    随着网络深度的增加,训练变得愈加困难,这主要是因为在基于随机梯度下降的网络训练过程中,误差信号的多层反向传播非常容易引发“梯度弥散”(梯度过小会使回传的训练误差信号极其微弱)或者“梯度爆炸”(梯度过大导致模型出现NaN)的现象。目前一些特殊的权重初始化策略和批规范化(BN)等方法使这个问题得到了极大改善——网络可以正常训练了!! 但是实际情形不容乐观。当模型收敛时,另外的问题又来了:随着网络深度的增加,训练误差没有降低反而升高。 这一现象与直觉极其不符,浅层网络可以被训练优化到一个很好的解,那么对应的更深层的网络至少也可以,而不是更差。这一现象在一段时间内困扰着更深层卷积神经网络的设计、训练和应用。

    残差模块:y=F(x,w)+x
    高速公路网络的“变换门”和“携带门”都为恒等映射时(即令 T=1,C=1T=1,C=1 ),就得到了残差网络

    10.2、Normalization引入目的

    Normalization有很多种,但是它们都有一个共同的目的,那就是把输入转化成均值为0方差为1的数据。我们在把数据送入激活函数之前进行normalization(归一化),因为我们不希望输入数据落在激活函数的饱和区。 Batch Normalization。BN的主要思想就是:在每一层的每一批数据上进行归一化。我们可能会对输入数据进行归一化,但是经过该网络层的作用后,我们的数据已经不再是归一化的了。随着这种情况的发展,数据的偏差越来越大,我的反向传播需要考虑到这些大的偏差,这就迫使我们只能使用较小的学习率来防止梯度消失或者梯度爆炸。

     Layer normalization它也是归一化数据的一种方式,不过 LN 是在每一个样本上计算均值和方差,而每一个特征维度上进行归一化

     

    11、Decoder层

    transform的整体结构如下图所示;在解码器中,Transformer block比编码器中多了个encoder-decoder attention。在encoder-decoder attention中, 来自于解码器的上一个输出,K   V 则来自于与编码器的输出。

    由于在机器翻译中,解码过程是一个顺序操作的过程,也就是当解码第 个特征向量时,我们只能看到第 K-1 及其之前的解码结果,论文中把这种情况下的multi-head attention叫做masked multi-head attention。transfrom的encoder和decoder整体架构如下:

    11.1、Mask

    mask 表示掩码,它对某些值进行掩盖,使其在参数更新时不产生效果。Transformer 模型里面涉及两种 mask,分别是 padding mask 和 sequence mask。

    11.2、Padding Mask

    padding mask:因为每个批次输入序列长度是不一样,需要对输入序列进行对齐。给较短的序列后面填充 0,对于输入太长的序列,截取左边的内容,把多余的直接舍弃。这些填充的位置,没什么意义,所以我们的attention机制不应该把注意力放在这些位置上,所以我们需要进行一些处理。

    具体的做法是,把这些位置的值加上一个非常大的负数(负无穷),这样的话,经过 softmax,这些位置的概率就会接近0!

    而我们的 padding mask 实际上是一个张量,每个值都是一个Boolean,值为 false 的地方就是我们要进行处理的地方。

    11.3、Sequence mask

    sequence mask 是为了使得 decoder 不能看见未来的信息。也就是对于一个序列,在 time_step 为 t 的时刻,我们的解码输出应该只能依赖于 t 时刻之前的输出,而不能依赖 t 之后的输出。因此我们需要想一个办法,把 t 之后的信息给隐藏起来。

    具体做法:产生一个上三角矩阵,上三角的值全为0。把这个矩阵作用在每一个序列上。

    • 对于 decoder 的 self-attention,同时需要padding mask 和 sequence mask 作为 attn_mask,具体实现就是两个mask相加作为attn_mask。
    • 其他情况,attn_mask 一律等于 padding mask。

    eg:

    编码器处理输入序列,最终输出为一组注意向量k和v。每个解码器将在其“encoder-decoder attention”层中使用k,v注意向量,这有助于解码器将注意力集中在输入序列中的适当位置:

    11.4、解码过程

    对于Decoder,和Encoder一样,初始输入为词嵌入+词位置编码;不同在于,self attention只关注输出序列中的较早的位置。在self-attention 计算中的softmax步骤之前屏蔽了特征位置(设置为 -inf)来完成的。encoder-decoder attention过程和self-attention一致,只是其k,v来自于编码器的输出。

    动图可以参考:https://blog.csdn.net/jiaowoshouzi/article/details/89073944

                              https://blog.csdn.net/qq_41664845/article/details/84969266

    12、输出层

             Decoder的输出是浮点数的向量列表。把得到的向量映射为需要的词,需要线性层和softmax层获取预测为词的概率。

             线性层是一个简单的全连接神经网络,它是由Decoder堆栈产生的向量投影到一个更大,更大的向量中,称为对数向量

            假设实验中我们的模型从训练数据集上总共学习到1万个英语单词(“Output Vocabulary”)。这对应的Logits矢量也有1万个长度-每一段表示了一个唯一单词的得分。在线性层之后是一个softmax层,softmax将这些分数转换为概率。选取概率最高的索引,然后通过这个索引找到对应的单词作为输出。

    13、 优缺点总结

    优点

    (1)虽然Transformer最终也没有逃脱传统学习的套路,Transformer也只是一个全连接(或者是一维卷积)加Attention的结合体。但是其设计已经足够有创新,因为其抛弃了在NLP中最根本的RNN或者CNN并且取得了非常不错的效果,算法的设计非常精彩,值得每个深度学习的相关人员仔细研究和品位。

    (2)Transformer的设计最大的带来性能提升的关键是将任意两个单词的距离是1,这对解决NLP中棘手的长期依赖问题是非常有效的。

    (3)Transformer不仅仅可以应用在NLP的机器翻译领域,甚至可以不局限于NLP领域,是非常有科研潜力的一个方向。

    (4)算法的并行性非常好,符合目前的硬件(主要指GPU)环境。

    缺点

    (1)粗暴的抛弃RNN和CNN虽然非常炫技,但是它也使模型丧失了捕捉局部特征的能力,RNN + CNN + Transformer的结合可能会带来更好的效果。

    (2)Transformer失去的位置信息其实在NLP中非常重要,而论文中在特征向量中加入Position Embedding也只是一个权宜之计,并没有改变Transformer结构上的固有缺陷。

     

    参考文章

    https://blog.csdn.net/weixin_44695969/article/details/102997574 (残差网络)

    https://blog.csdn.net/jiaowoshouzi/article/details/89073944 (一文读懂bert,介绍了传统的神经网络模型,及transform详解)

    https://blog.csdn.net/qq_41664845/article/details/84969266 (transform很详细的介绍)

    https://zhuanlan.zhihu.com/p/139595546 (各种mask策略)

    http://jalammar.github.io/illustrated-transformer/ (英文transfrom详解)

    https://zhuanlan.zhihu.com/p/48508221 (transform针对改进点解析的文章)

    https://zhuanlan.zhihu.com/p/60821628 (transform的一些细节优化点详解)

    展开全文
  • 前面我们一起学习了CSS3中的渐变、圆角、阴影等几个属性的使用,今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这...
  • 深入理解Transform

    2019-06-10 12:12:29
    其实Transform API在一个android工程的打包流程中作用非常大, 像是我们熟知的混淆处理, 类文件转dex文件的处理, 都是通过Transform API去完成的. 本篇内容主要围绕Transform做展开: Transform API的使用及原理 字节...
  • Unity五 Transform

    2019-03-31 10:54:40
    Transform 获取的几种方式 一、先获取 GameObject 在场景中,然后再获取 transfomr 1、GameObject a = GameObject.Find()—>a.transform 2、GameObject b = GameObject.Find()—>b.GetComponent() 二、...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述在之前写的如何打印用六边形组合的蜂窝状图形的博客...
  • Transform 的简单理解

    2019-06-16 07:01:29
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • Unity之Transform组件

    千次阅读 2019-06-05 16:08:09
    Unity官方文档Transform Transform组件一 Transform组件二 Transform组件三 一. Transform组件用途 维护场景树 对3D物体的平移 缩放 旋转 二. 场景树定义 在 Hierarchy 视图中. 一个 game_scene场景. 下面有 Main...
  • transform

    万次阅读 2018-02-08 21:43:28
    Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放...
  • transform(变形)和transform-origin(变形原点)的说明: 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webkit-transform,-moz-transform,-o-tr...
  • CSS Transform

    2020-04-02 10:38:15
    使用 transform 属性可以对元素进行旋转、缩放、平移、倾斜 旋转 使用 transform:rotate() 属性来设置元素的旋转 <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px...
  • fit_transform,fit,transform区别和作用详解!!!!!!

    万次阅读 多人点赞 2018-10-09 10:04:08
    1. 写在前面 fit和transform没有任何关系,仅仅是数据处理的两个不同环节,之所以出来这么个函数名,仅仅是为了写代码方便。...transform函数是一定可以替换为fit_transform函数的,fit_transform函数不能替换为...
  • 通俗地讲清楚fit_transform()和transform()的区别

    万次阅读 多人点赞 2020-03-31 14:36:45
    fit_transform是fit和transform的组合。 我们知道fit(x,y)在新手入门的例子中比较多,但是这里的fit_transform(x)的括号中只有一个参数,这是为什么呢? fit(x,y)传两个参数的是有监督学习的算法,fit(x)传一...
  • 敲《Python机器学习及实践》上的code的时候,对于数据预处理中涉及到的fit_transform()函数和transform()函数之间的区别很模糊,查阅了很多资料,这里整理一下:涉及到这两个函数的代码如下:# 从sklearn....
  • fit_transform()函数: 先拟合数据,找到数据的整体指标,如均值、方差、最大值最小值等等,将其转化为标准形式;transform()函数: 通过找中心和缩放等实现标准化;结论:必须先用fit_transform(partData),之后再...
  • 1. fit_transform是fit和transform的组合。 2. fit(x,y)传两个参数的是有监督学习的算法,fit(x)传一个参数的是无监督学习的算法,比如降维、特征提取、标准化。 3. fit和transform没有任何关系,之所以出来这么个...
  • C++/C++11中std::transform的使用

    万次阅读 多人点赞 2019-09-03 08:53:24
    std::transform在指定的范围内应用于给定的操作,并将结果存储在指定的另一个范围内。要使用std::transform函数需要包含<algorithm>头文件。 以下是std::transform的两个声明,一个是对应于一元操作,一个是...
  • unity3d中Transform组件 Rotate()和rotation变量详解

    万次阅读 多人点赞 2018-03-26 09:48:47
    Transform组件是每个游戏对象必须有的一个组建,因为你创建一个空物体,它也有该组建,因为unity3d是面向组建开发的一款游戏引擎。通过一张图片来看看它的属性 你可以在通过代码查看这些属性的区别 Debug.Log("...
1 2 3 4 5 ... 20
收藏数 348,246
精华内容 139,298
关键字:

transform