---恢復內容開始---
閒篇準備 好吧，閒話不說了，首先跟大家坦白一下，今天的內容會涉及到圖形學知識，但是我的圖形學知識都完全還給老師了，所以！你懂得~ 關於矩陣的知識我可能說的不清楚。大家可以到網上找一下相關的部落格，很多人寫的還是很好的。
開始 首先為了能讓大家更好的了解整個專案，先
給大家先簡單介紹一下各個類。具體的**會在下文介紹。我圖簡便用的是故事板（storyboard）拖的乙個collectionview控制器，並將整個控制器的類指定為collectionviewcontroller。又建立乙個自定義布局類繼承自uicollectionviewflowlayout類。
下面主要來看一下布局類，以及布局類的列印資訊。通過列印資訊我們可以知道各個方法的呼叫順序，了解呼叫順序對開發至關重要。我們先來看一下列印資訊：
2015-05-19 00:32:07.460 翻頁效果[13957:392865] preparelayout
2015-05-19 00:32:07.461 翻頁效果[13957:392865] layoutattributesforelementsinrect
2015-05-19 00:32:08.530 翻頁效果[13957:392865] shouldinvalidatelayoutforboundschange
2015-05-19 00:32:08.531 翻頁效果[13957:392865] preparelayout
2015-05-19 00:32:08.531 翻頁效果[13957:392865] layoutattributesforelementsinrect
2015-05-19 00:32:08.553 翻頁效果[13957:392865] shouldinvalidatelayoutforboundschange
然後我們再來看一下layout 方法，layout方法我加了詳細的注釋，方便大家閱讀。
//並不是一下子全部都返回出來 而是逐漸的提供
- (nsarray *)layoutattributesforelementsinrect:(cgrect)rect
{ nslog(
@"layoutattributesforelementsinrect");
//首先將系統的特徵陣列取出
nsarray *attrs=[super layoutattributesforelementsinrect:rect];
//這兩個資料下面會用到，用到再解釋
cgfloat halfw=self.collectionview.bounds.size.width/2
; cgfloat orx=self.collectionview.contentoffset.x;
//將這次提供的特徵陣列 乙個乙個的將特徵取出來進行社會主義大改造
for (uicollectionviewlayoutattributes *attr in
attrs)
{//計算attr中心的距離可視中心的距離
cgfloat distance=(orx+halfw)-cgrectgetmidx(attr.frame);
//這裡就是用到了上面定義個資料，計算出乙個比例，好供我們再下面進行計算，離螢幕中心越遠越大
cgfloat scale=distance/halfw;
//也就是說這個 item 的身體至少一半在螢幕內時我們才去改變它的布局特徵
if (scale<=1
) {
//計算各個attr 的m34 什麼事m34? 它是transform3d的乙個屬性
//m11 (x 縮放) m12 (y 切變) m13 ( ) m14 ( )
//m21 (x 切變) m22(y 縮放) m23 ( ) m24 ( )
//m33 ( ) m32 ( ) m33 ( ) m34 (最重要的m34 具有一種傾斜效果，有正負之分方向不同)
//m41 (x 平移) m42 (y 平移) m43 (z 平移) m44 ( )
//建立乙個單位矩陣
catransform3d rotationtrans=catransform3didentity;
//單位矩陣的m34 改為-0.004 數字大家覺得合適即可
rotationtrans.m34=-0.004
;
//計算各個attr 的y軸旋轉角度 根據比例來計算，離螢幕中心越遠旋轉角度越大 這裡表示繞y軸旋轉
rotationtrans=catransform3drotate(rotationtrans, m_pi_4*(scale), 0.0, 1, 0.0
);
//計算各個attr的縮放
cgfloat factor =0.3
; cgfloat zoom=1+factor-abs(scale)*factor;//
控制再1~1.2倍
catransform3d zoomtrans=catransform3dmakescale(zoom, zoom, 1.0
);
//擬合各個trans
attr.transform3d=catransform3dconcat(rotationtrans, zoomtrans);
//計算各個attr 的透明度
transform的3D效果實現
原理 構建乙個立方體，四方體共有六個面，採用定位及其位移旋轉實現。css樣式 rect wrap 容器 container 立方體的每個面 slide slide img 實現方法，六個面重疊，以前面的乙個面為準，向前移動200px，向後沿著z軸移動200px構建前後面 左右各沿著y軸旋轉90度，前...
Viewpager翻頁3D動效
那麼針對這兩種效果，我們通過 實現說明 自定義viewpager public class measurezoomviewpager extends viewpager int width context.getresources getdisplaymetrics widthpixels 表示設定...
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...