3d翻轉 ios iOS動畫特效之立方體翻轉

先來看看效果：

下面進入正題，是時候展現真正的技術了：

首先在控制器裡新增乙個scrollview，再在scrollview上的對應位置上新增要展示的imageview(立方體檢視組)，當然也可以放上其它子控制器的view實現更多功能這個隨意不是重點

//*******新增scrollview*******

[self createscrollview];

//******建立立方體檢視組******

[self createcubicviewarray];

//新增檢視到scrollview上

for (int i=0; i<_viewarray.count i>

uiimageview *transview=_viewarray[i];

//檢視在scrollview上對應的位置

transview.x=self.view.bounds.size.width * i;

#pragma mark - scrollview滑動事件

-(void)scrollviewdidscroll:(uiscrollview *)scrollview{

//當前頁數

nsinteger currentpage=_currentpage;

//當前檢視

uiview *currentview=_viewarray[currentpage];

//上乙個檢視

uiview *lastview=nil;

if (currentpage-1>=0) {

lastview=_viewarray[currentpage-1];

//下乙個檢視控制器檢視

uiview *nextview;

if (currentpage+1<=3) {

nextview=_viewarray[currentpage+1];

//本次偏移距離

cgfloat currentoffset=scrollview.contentoffset.x-currentpage*self.view.bounds.size.width;

//本次偏移角度

cgfloat deltaangle=currentoffset/self.view.bounds.size.width * m_pi_2;

//****************當前檢視移動變幻***************

//設定錨點

currentview.layer.anchorpoint=cgpointmake(0.5, 0.5);

//向螢幕前方移動

catransform3d move = catransform3dmaketranslation(0, 0, self.view.bounds.size.width/2);

//旋轉

catransform3d rotate = catransform3dmakerotation(-deltaangle, 0, 1, 0);

//平移

catransform3d plaintmove=catransform3dmaketranslation( currentoffset, 0, 0);

//向螢幕後方移動

catransform3d back = catransform3dmaketranslation(0, 0, -self.view.bounds.size.width/2);

//連線

catransform3d concat=catransform3dconcat( catransform3dconcat(move, catransform3dconcat(rotate, plaintmove)),back);

catransform3d transform=catransform3dperspect(concat, cgpointmake(currentoffset/2, self.view.bounds.size.height), 5000.0f);

//新增變幻特效

currentview.layer.transform=transform;

//****************下乙個檢視移動變幻***************

//設定錨點

nextview.layer.anchorpoint=cgpointmake(0.5, 0.5);

//向螢幕前方移動

catransform3d move2 = catransform3dmaketranslation(0, 0, self.view.bounds.size.width/2);

//旋轉

catransform3d rotate2 = catransform3dmakerotation(-deltaangle+m_pi_2, 0, 1, 0);

//平移

catransform3d plaintmove2=catransform3dmaketranslation( currentoffset-self.view.bounds.size.width, 0, 0);

//向螢幕後方移動

catransform3d back2 = catransform3dmaketranslation(0, 0, -self.view.bounds.size.width/2);

//拼接

catransform3d concat2=catransform3dconcat( catransform3dconcat(move2, catransform3dconcat(rotate2, plaintmove2)),back2);

catransform3d transform2=catransform3dperspect(concat2, cgpointmake(self.view.bounds.size.width/2+currentoffset/2, self.view.bounds.size.height), 5000.0f);

//新增變幻特效

nextview.layer.transform=transform2;

//****************上乙個檢視移動變幻***************

//設定錨點

lastview.layer.anchorpoint=cgpointmake(0.5, 0.5);

//向螢幕前方移動

catransform3d move3 = catransform3dmaketranslation(0, 0, self.view.bounds.size.width/2);

//旋轉

catransform3d rotate3 = catransform3dmakerotation(-deltaangle-m_pi_2, 0, 1, 0);

//平移

catransform3d plaintmove3=catransform3dmaketranslation( currentoffset+self.view.bounds.size.width, 0, 0);

//向螢幕後方移動

catransform3d back3 = catransform3dmaketranslation(0, 0, -self.view.bounds.size.width/2);

//拼接

catransform3d concat3=catransform3dconcat(catransform3dconcat(move3, catransform3dconcat(rotate3, plaintmove3)),back3);

catransform3d transform3=catransform3dperspect(concat3, cgpointmake(-self.view.bounds.size.width/2+currentoffset/2, self.view.bounds.size.height), 5000.0f);

//新增變幻特效

lastview.layer.transform=transform3;

這裡記得要復原一下3d變換，不然滑快了會出現頁面錯亂

-(void)scrollviewdidenddecelerating:(uiscrollview *)scrollview{

//改變選中頁序號

[self changeindex];

//3d變幻恢復原狀態

for (uiview * view in _viewarray) {

view.layer.transform=catransform3didentity;

對了，記得新增乙個很重要的透視變換函式，核心在於仿射矩陣的m34屬性，這樣才會產生遠小近大的3d效果，讓動畫更炫酷

//3d透視函式

catransform3d catransform3dmakeperspective(cgpoint center, float disz)

catransform3d transtocenter = catransform3dmaketranslation(-center.x, -center.y, 0);

catransform3d transback = catransform3dmaketranslation(center.x, center.y, 0);

catransform3d scale = catransform3didentity;

scale.m34 = -1.0f/disz;

return catransform3dconcat(catransform3dconcat(transtocenter, scale), transback);

滑鼠移動3D翻轉動畫特效

好久沒有更新文章咯，今天我為大家帶來乙個酷炫的3d翻轉特效效果例子 該效果是用的純html css3實現的哦 特別指示 1 用到咯 perspective 2 transform style 該屬性也是3d效果中經常使用的，其兩個引數，flat preserve 3d.前者flat為預設值，表示平面...

使用css3 實現3d正反翻轉特效

首先，上傳一下最終效果 接下來，我們按照結構來實現當前的demo效果 設定.item的perspective屬性距離，就是3d效果的z軸距離，瀏覽器預設就xy兩個軸向，css3增加了z軸，就是當前2d平面的3d距離，單位是畫素。我們在這裡設定了3d距離是perspective 500px 正面 背面...

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...