最近看到了乙個3d旋轉的動畫，就想著自己去實現以下。那麼，接下來就通過這邊文章記錄以下學習過程，慢慢深入了解以下3d旋轉。
一、如何旋轉
每個view都在系統的座標系中，就手機螢幕來說，左上角為 (0 , 0)，向右橫向的為x軸正方向，向下縱向的為y軸正方向，垂直於手機螢幕的方向既z軸方向。
所以z軸的旋轉屬於平面上的旋轉，實現3d效果的前提就是有x軸或者y軸的參與。
二、沿著y軸旋轉
先看一下catransform3dmakerotation的定義：
ca_extern catransform3d catransform3dmakerotation (cgfloat angle, cgfloat x, cgfloat y, cgfloat z)
angle：角度 x,y,z分別代表是三個方向的座標
catransform3d rotate = catransform3dmakerotation(m_pi/6, 0, 1, 0);
self.imageview
.layer
.transform = rotate;
查資料後發現，原來在calayer的顯示系統中，預設使用的是正交投影，沒有遠小近大效果，所以我們對 imageview 的旋轉操作，只能造成y軸上的縮放。而無法觀察到3d 的效果。
其實這個時候 imageview 已經沿著y軸旋轉了 m_pi/6 ，但只是我們無法直接觀察到這種效果。
三、新增3d效果
這時候我們需要用到透視投影。
先看每個矩陣裡數字代表的含義：
struct catransform3d
;我們所需要的正是 m34 。
catransform3d rotate =catransform3dmakerotation(m_pi/6, 0, 1, 0);其中：m34屬性 控制透視效果
正的值向下（左）方往裡縮放 負的值上（右）方往裡縮放
disz 控制透視的強度 數字越小 深度越大 拉伸效果越明顯
cgfloat disz = 200;
catransform3d scale = catransform3didentity;
scale.m34 = -1.0f/disz;
catransform3d transform = catransform3dconcat(rotate, scale);self.imageview
.layer
.transform = transform;
四、控制旋轉中心軸
如果通過角度的遞增，給我們的3d旋轉加乙個動畫，我們就會明顯的看到，預設的以平行於y軸的 imageview 的中心軸進行旋轉。那麼如果讓我們 imageview 以自己的左邊線進行旋轉呢？
其實也很簡單，旋轉是以layer的錨點為中心進行旋轉的。預設是 (0.5 , 0.5) 。我們只需要改變錨點的位置就好了。
image.layer
.anchorpoint = cgpointmake(0, 0.5);
HTML CSS實現3D旋轉相簿
在前幾篇部落格中介紹了transform的屬性，那麼再經過幾天的學習之後，現在對transform的屬性有了更多了理解，同時也通過自己的想法，完成了下面的作品 實現乙個3d的旋轉相簿 廢話不多說，直接上 吧 lang en charset utf 8 name viewport content wi...
3D旋轉的時鐘
var hour new date gethours if hour 11 varmins new date getminutes var sec newdate getseconds 秒針，每週走60個單位 varunitsec 2 math.pi 60 分鐘，每週走60 60個單位 varuni...
css3 js實現3D旋轉效果
用css3和js實現3d旋轉的效果，主要使用到css3 transform中的一些屬性 perspective，rotate，translate。下面主要介紹一些transform中的屬性的效果和作用 1.transform style 一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d...