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度。這兩句的效果是相同的，但順序不一樣讓它們的值也不一樣。