tramsform-origin

最新更新: 2020-07-23 16:34:21 阅读: 49次

transform-origin属性详解和百分比关系


transform里面有一个属性transform-origin,该属性可以改变元素的原点位置(元素进行旋转时的轴心),默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处


我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。·

如果我们把元素变换原点(transform-origin)设置0(x) 0(y),这个时候元素的变换原点转换到元素的左顶角处


正如上图所示,改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置,其基本语法如下所示:

transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ? 

上面的语法让人看得发晕,其实可以将语法拆分成:

//code from http://caibaojian.com/transform-origin.html/*只设置一个值的语法*/ transform-origin: x-offset
transform-origin:offset-keyword
/*设置两个值的语法*/ transform-origin:x-offset y-offset
transform-origin:y-offset x-offset-keyword
transform-origin:x-offset-keyword y-offset
transform-origin:x-offset-keyword y-offset-keyword
transform-origin:y-offset-keyword x-offset-keyword
/*设置三个值的语法*/ transform-origin:x-offset y-offset  z-offset
transform-origin:y-offset x-offset-keyword  z-offset
transform-origin:x-offset-keyword y-offset  z-offset
transform-origin:x-offset-keyword y-offset-keyword  z-offset
transform-origin:y-offset-keyword x-offset-keyword  z-offset

transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。·

2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。

3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:

  • x-offset:用来设置transform-origin水平方向X轴的偏移量,可以使用<length>和<percentage>值,同时也可以是正值(从中心点沿水平方向X轴向右偏移量),也可以是负值(从中心点沿水平方向X轴向左偏移量)。
  • offset-keyword:是top、right、bottom、left或center中的一个关键词,可以用来设置transform-origin的偏移量。
  • y-offset:用来设置transform-origin属性在垂直方向Y轴的偏移量,可以使用<length>和<percentage>值,同时可以是正值(从中心点沿垂直方向Y轴向下的偏移量),也可以是负值(从中心点沿垂直方向Y轴向上的偏移量)。
  • x-offset-keyword:是left、right或center中的一个关键词,可以用来设置transform-origin属性值在水平X轴的偏移量。
  • y-offset-keyword:是top、bottom或center中的一个关键词,可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
  • z-offset:用来设置3D变形中transform-origin远离用户眼睛视点的距离,默认值z=0,其取值可以<length>,不过<percentage>在这里将无效。

看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

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

为了让大家能一眼看明白,下面截图以transform中的旋转rotate()为例,并transform-origin取值不一样时的效果:

transform-origin取值为center(或center center或50% 或50% 50%):

transform-3

transform-origin取值为top(或top center或center top或50% 0):

原文来自http://caibaojian.com/transform-origin.html

transform-origin取值为right(或right center 或center right 或 100% 或 100% 50%):

transform-5

transform-origin取值为bottom(或bottom center 或center bottom 或 50% 100%):

transform-6

transform-origin取值为left(或left center或center left或0或0 50%):

transform-7

transform-origin取值为top left(或left top或0 0):

transform-8

transform-origin取值为right top(或top right或100% 0):

transform-9

transform-origin取值为bottom right(或right bottom或100% 100%):

transform-10

transform-origin取值为left bottom(或bottom left 或 0 100%):

transform-11

CSS3变形中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点,但其中的位移translate()始终以元素中心点进行位移。例如下面的两段代码的演示过程:

div { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); } 

接下来通过transform-origin将变形原点设置为100% 100%:

div { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); } 

虽然元素的变形原点通过transform-origin从50% 50%变成100% 100%,但元素位移translate()始终是依元素中心点进行位移,如下图所示:

transform-12

到目前为止,transform-origin属性在现代主流浏览器得到很好的支持,但在一些浏览器之下依然需要添加各浏览器私有属性,详细情况如下所示:

  • 2D变形中transform-origin需要添加浏览器私有属性版本:IE9+、Firefox3.5+、Chrome4+、Safari3.1+、Opera10.5+;ios Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Chrome for Android25.0+。
  • 2D变形中transform-origin支持W3C标准规范的浏览器:IE10+、Firefox16+、Opera12.1+;Opera Mobile11.0+、Firefox for Android19.0。
  • 3D变形中transform-origin需要添加浏览器私有属性版本:IE10+、Firefox10+、Chrome12+、Safari4+、Opera15+、iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+。
  • 3D变形中transform-origin支持W3C标准规范的浏览器:Firefox16+、Firefox for Android19+

通过transform-origin属性改变元素的原点,可以实现不同的变形效果,下面的示例中我们分别演示了改变元素原点前后,CSS3变形各函数对图像变形操作。