变形--原点 transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。

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

transform-origin取值和元素设置背景中的background-position取

值类似,如下表所示:

关键字                              百分数

top=top center                      50% 0

left=left center                                   0 50%

bottom=bottom center                          50% 100%

right=right center                                 100%

center=center center                            50% 50%

top left=left top                                   0 0

top right=right top                                0 100%

bottom left =left bottom                      100% 100%

bottom right=right bottom                  100% 0

 

 

用法:transform-origin: left;
效果:

CSS3 变形--原点 transform-origin

相关文章: