css3属性transform-origin属性解释

transform是CSS3中的变换属性，常用的有translate（平移）、rotate（旋转）、skew（倾斜）、scale（缩放）方法。而transform-origin并不是transform的一个属性值，它有独立的语法，但是值得注意的是transform-origin必须和transform一起使用，从名字上也能看出来，就是各种action的设置设置变换参考点。默认情况下，元素的运动参考点是元素框的中心。transform可以设置九个位置的值，有left|中心|right水平方向三个值，垂直方向三个值，即top|中心|bottom，所以总共有九个。语法：transform-origin:[|<长度>|左|中心①|右][<百分比>|<长度>|顶部|中心②|底部]？默认值：50%50%，效果等同于centercenter适用于：所有块级元素和部分内联元素值：：以百分比形式指定坐标值。可以为负。：指定具有长度值的坐标值。可以为负。left：指定原点的横坐标为leftcenter①：指定原点的横坐标为centerright：指定原点的横坐标为righttop：指定原点的纵坐标为topcenter②：指定原点的纵坐标为centerbottom：指定原点的纵坐标thespecifiedoriginisbottom:设置或检索要使用特定原点进行变换的对象。该属性提供2个参数值。**-如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，则该值将用于横坐标；纵坐标将默认为50%。**对应的脚本特征是transformOrigin。Compatibility：在transform属性默认情况下，变换的原点在元素的中心，或者在元素的X轴和Y轴的50%处，如下图：CSS做的不使用transform-origin来改变元素的原点变形所进行的旋转、位移、缩放等操作，都是在元素本身的中心位置（变形的原点）进行的。但是很多时候需要对不同位置的元素进行变换，我们可以使用transform-origin来改变元素的原点位置，让元素的原点不在元素的中心，从而达到需要的原点位置。似乎transform-origin值类似于background-position值。为了方便记忆，可以比较关键字和百分比值：top=topcenter=centertop=50%0right=rightcenter=centerright=100%or(100%50%)bottom=bottomcenter=centerbottom=50%100%left=leftcenter=centerleft=0or(050%)center=centercenter=50%or(50%50%)topleft=lefttop=00righttop=topright100%0bottomright=rightbottom=100%100%bottomleft=leftbottom=0100%为了让大家一目了然，下面截图以transform中的旋转rotate()为例，transform-取值时的效果origin不同：transform-origin的值为center(orcentercenteror50%or50%50%)：transform-origin的值为top(ortopcenterorcentertopor50%0)：值为transform-originisright(orrightcenterorcenterrightor100%or100%50%):transform-origin的值bottom(orbottomcenterorcenterbottomor50%100%):transform-origin的值isleft(orleftcenterorcenterleftOr0or050%):transform-origin的值为topleft(orlefttopor00):transform-origin的值为righttop(ortoprightor100%0):transform-origin的值为bottomright(orrightbottomor100%100%):transform-origin的值为leftbottom(orbottomleftor0100%):参考文章：http:///www.w3cplus.com/css3/t...例子：摆动的小球（钟摆效果）从上图可以看出，小球摆动效果首先利用了动画原理和transform-origin原理（很重要），先确定好球的变形中心点，然后添加动画效果。示意图：