transform-origin 的定位

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数，第一个参数表示X方向，第二个参数表示Y方向，但是，当用 left，right，center 来表示的时候，是不区分先后的！也就是说 left center 和 center left 是一回事。具体见下表：

    - top left | left top 等价于 0 0；

    - top | top center | center top 等价于 50% 0

    - right top | top right 等价于 100% 0

    - left | left center | center left 等价于 0 50%

    - center | center center 等价于 50% 50%（默认值）

    - right | right center | center right 等价于 100% 50%

    - bottom left | left bottom 等价于 0 100%

    - bottom | bottom center | center bottom 等价于 50% 100%

    - bottom right | right bottom 等价于 100% 100%

 

坑啊，今天第一次用CSS3 做3D 立方体，旋转的时候总是出错，后来看到了codepen 上的一个例子，研究了一下，总是不明白 transform-origin 这一点，后来仔细研究了下才发现不用考虑顺序……“左上角”也可以说“上左角”，“东南角”也可以说“南东角”。听着别扭，但意思一样。

codepen 的链接在这里：http://codepen.io/mirceageorgescu/pen/roblc

 

这个例子里还有一点让人困惑，就是 X Y Z 坐标系。之前一直以为坐标系是想三维建模软件里的世界坐标系一样不随着物体改变而改变，折腾了一整天立方体还是转不对。后来仔细研究下，发现坐标系是相对于元素自身的，也就是随着元素的旋转而旋转。X 指向右方，Y 指向下方，Z 指向前方。

 

第三点让人困惑的地方在于transform ,transform 中的属性是有先后顺序的。比如：transform: rotateY(180deg) translateZ(100px)，表示，先沿Y轴旋转180度，然后向前（即元素的正面）移动100px；这一句和下面这句是相同效果：transform: translateZ(-100px) rotateY(180deg) ，这个表示，先向后面（元素的背面）移动100px，然后旋转180度。这两句的效果是相同的，但顺序不同让它们的值也不同。