使用scale时transform-origin的功能是什么?

时间:2015-06-08 15:31:07

标签: html css css3

我理解transform-origin在轮换时的工作方式,但是当我使用scale时,它的工作原理与我公认的应该如何表现的天真假设不同。

以下是一个例子:http://jsfiddle.net/t71f46rb/我添加了一个过渡来帮助说明效果。

在我看来,当您提供transform-origin然后scale时,transform-origin所代表的点将成为缩放发生位置的中心。显然,情况并非如此,因为我的示例中的十字线的居中版本从未遇到要缩放的元素中的一个。

那么,这里到底发生了什么? transform-origin如何影响scale?另外,如果我希望元素中的那个点在scale期间居中,我怎么能实现呢?

1 个答案:

答案 0 :(得分:0)

transform-origin属性定义转换的起点

例如:对于宽度为200px,高度为200px且变换原点的div:50%90%(比如x点)和比例(2)

这意味着在转换之后div将具有400px的宽度和400px的高度,并且点x将在该新div的50%左右和90%的顶部。

转型前 enter image description here 转型后

enter image description here

  

如果我希望元素中的那个点在比例期间居中

然后你必须使用transform-origin:50%50%;

让我知道这是否有帮助