orign如何改变坐标为百分比_transform-origin属性详解和百分比关系

CSS3 transform里面有一个属性transform-origin，该属性可以改变元素的原点位置，之前的一篇文章：CSS揭秘之沿着环形路径运动的动画，正是巧妙的运用了原点位置，从而实现了围绕圆心运动。transform-origin里面的百分比没有详细了解是以什么为标准的。今天看看这篇文章详细了介绍了这个值跟left、right、top、bottom之间的关系。

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

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

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

正如上图所示，改变transform-origin属性的X轴和Ｙ轴的值就可以重置元素变形原点位置，其基本语法如下所示:transform-origin：[| | left | center | right | top | bottom] | [ | | left | center | right] | [[ | | left | center | right] && [ | | top | center | bottom]] ?

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

/*只设置一个值的语法*/

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轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。

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

x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用和值，同时也可以是正值(从中心点沿水平方向Ｘ轴向右偏移量)，也可以是负值(从中心点沿水平方向Ｘ轴向左偏移量)。

offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。

y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用和值，同时可以是正值(从中心点沿垂直方向Ｙ轴向下的偏移量)，也可以是负值(从中心点沿垂直方向Ｙ轴向上的偏移量)。

x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。

y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-ori

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！