之前分享過一篇介紹仿射變換的文章，仿射變換屬于平面變換，本文來介紹一下iOS中的3D變換 ——— CATransform3D。

1. 回顧一下二維變換

二維變換，也即仿射變換，CGAffineTransform結構體類型中有6個參數：

public struct CGAffineTransform {
    public var a: CGFloat
    public var b: CGFloat
    public var c: CGFloat
    public var d: CGFloat
    public var tx: CGFloat
    public var ty: CGFloat

    public init()
    public init(a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat, tx: CGFloat, ty: CGFloat)
}

增廣之后可得如下變換矩陣：

仿射矩陣

x' = ax + cy + tx
y' = bx + dy + ty

具體變換過程及使用，可以參考《Swift 中使用 CGAffineTransform》。

2. 三維變換CATransform3D

其中三維變換矩陣一般應用在視圖的 view.layer.transform 和 view.layer.sublayerTransform中。CATransform3D結構體類型中的參數為：

public struct CATransform3D {

    public var m11: CGFloat
    public var m12: CGFloat
    public var m13: CGFloat
    public var m14: CGFloat
    public var m21: CGFloat
    public var m22: CGFloat
    public var m23: CGFloat
    public var m24: CGFloat
    public var m31: CGFloat
    public var m32: CGFloat
    public var m33: CGFloat
    public var m34: CGFloat
    public var m41: CGFloat
    public var m42: CGFloat
    public var m43: CGFloat
    public var m44: CGFloat

    public init()

    public init(m11: CGFloat, m12: CGFloat, m13: CGFloat, m14: CGFloat, m21: CGFloat, m22: CGFloat, m23: CGFloat, m24: CGFloat, m31: CGFloat, m32: CGFloat, m33: CGFloat, m34: CGFloat, m41: CGFloat, m42: CGFloat, m43: CGFloat, m44: CGFloat)
}

這些參數依然對應一個變換矩陣，

本圖來自網絡

上面參數對應矩陣的位置如下：

{m11, m12 , m13, m14
m21, m22, m23, m24
m31, m32, m33, m34
m41, m42, m43, m44 }

x' = m11x + m21y + m31z + m41
y' = m12x + m22y + m32z + m42
z' = m13x + m23y + m33z + m43
(m14、m24和m34為各軸透視變換參數，一般單獨設置，他們對m44的值產生影響，而m44對投影的圖形在對應軸*方向產生線性影響，其初始值為1)

從m11到m44定義的含義如下：
m11：x軸方向進行縮放
m12：和m21一起決定z軸的旋轉
m13:和m31一起決定y軸的旋轉
m14:
m21:和m12一起決定z軸的旋轉
m22:y軸方向進行縮放
m23:和m32一起決定x軸的旋轉
m24:
m31:和m13一起決定y軸的旋轉
m32:和m23一起決定x軸的旋轉
m33:z軸方向進行縮放
m34:透視效果m34= -1/D，D越小，透視效果越明顯，必須在有旋轉效果的前提下，才會看到透視效果
m41:x軸方向進行平移
m42:y軸方向進行平移
m43:z軸方向進行平移
m44:初始為1

則，原始矩陣為：

{1,  0 ,  0,  0
  0,  1,  0,  0
  0,  0,  1,  0
  0,  0,  0,  1 }

2.1 旋轉 rotate

• 繞Z軸

{ cos(θ)  ，-sin(θ)   ， 0   ，0
   sin(θ) ， cos(θ)   ， 0   ，0
     0    ，   0      ， 1   ，0
     0    ，   0      ， 0   ，1}

• 繞Y軸

{ cos(θ) ，0 ，sin(θ) ，0
     0   ，1 ，  0    ，0
 -sin(θ） ，0 ，cos(θ) ，0
    0    ，0  ，   0  ，1}

• 繞X軸

{1  ，  0     ，  0      ，0
 0  ，cos(θ)  ，-sin(θ)  ，0
 0  ，sin(θ)  ，cos(θ)   ，0
 0  ，  0     ，  0      ，1}

2.2 切變 shear

• 沿X軸

{ 1  ，k  ，0  ，0
  0  ，1  ，0  ，0
  0  ，0  ，1  ，0
  0  ，0  ，0  ，1}

• 沿Y軸

{ 1  ，0  ，0  ，0
  k  ，1  ，0  ，0
  0  ，0  ，1  ，0
  0  ，0  ，0  ，1}

2.3 鏡像

• 基于Y-X平面

{ 1 ，0  ，0  ，0
 0  ，1  ，0  ，0
 0  ，0  ，-1 ，0 
 0  ，0  ，0  ，1}

• 基于X-Z平面

{1  ，0  ，0   ，0 
 0  ，-1  ，0  ，0
 0  ，0  ，1   ，0
 0  ，0  ，0   ，1}

• 基于Z-Y平面

{ -1  ，0  ，0  ，0
   0  ，1   ，0  ，0
   0  ，0   ，1  ，0
   0  ，0   ，0  ，1}

2.4 針對z軸的透視投影

m34 = -1/d

d值決定了觀察點的位置，d為正無窮大的時候，觀察點在無窮遠處，此時投影線垂直于投影平面，CATransform3D中m34的默認值為0，即觀察點在無窮遠處。m14,m24同理。

當d為正的時候，投影是人眼觀察現實世界的效果，即在投影平面上表現出近大遠小的效果，z越靠近原點則這種效果越明顯，越遠離原點則越來越不明顯，當z為正無窮大的時候，則失去了近大遠小的效果，此時投影線垂直于投影平面，也就是視點在無窮遠處，CATransform3D中m34的默認值為0，即視點在無窮遠處.

注意：齊次坐標到數學坐標的轉換通用的齊次坐標為 (a, b, c, h)，其轉換成數學坐標則為 (a/h, b/h, c/h)。

• 代數解釋

假設一個Layer anchorPoint為默認的 (0.5, 0.5 )，其三維空間中一個A點 (6, 0, 0)，m34 = -1/1000.0，則此點往z軸負方向移動10個單位之后，則在投影平面上看到的點的坐標是多少呢？

A點使用齊次坐標表示為 (6, 0, 0, 1)

QuartzCore框架為我們提供了函數來算出所需要的矩陣，

    var transform3D: CATransform3D = CATransform3DIdentity
    transform3D.m34 = -1.0 / 1000.0
    transform = CATransform3DTranslate(transform, 0, 0, -10)

計算出來的矩陣為

{ 1,    0,    0,     0
  0,    1,    0,     0
  0,    0,    1,     -0.001
  0,    0,  -10,    1.01}   

其實上面的變換矩陣本質上是兩個矩陣相乘得到的 變換矩陣 * 投影矩陣 變換矩陣為

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,    0
 0,    0,   -10,  1}     

投影矩陣為

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,   -0.001
 0,    0,    0,    1}     

上面的兩個矩陣相乘則會得到最終的變換矩陣(如果忘記矩陣乘法的可以去看下線性代數復習下)，所以一個矩陣就可以完成變換和投影。

將A點坐標乘上最終的變換矩陣，則得到 {6, 0 , -10, 1.01}, 轉換成數學坐標點為 {6/1.01, 0, 10/1.01},則可以知道其在投影平面上的投影點為 {6/1.01, 0, 0} 也就是我們看到的變換后的點。其比之前較靠近原點。越往z軸負方向移動，則在投影平面上越靠近原點。

• 幾何解釋

將上面的例子使用幾何的方式來進行解釋分析，當我們沿著y軸的正方向向下看時候，可以得到如下的景象:

虛線為投影線，其和x軸的交點即為A點的投影點。 由相似三角形的定理我們很容易算出投影的點，

1000/(1000 + 10) = x/6,則x = 6*1000/1010 = 6/1.01

3. 常用的3D變換方法

CATransform3DScale返回通過縮放現有變換構造的變換矩陣，sx/sy/sz即為x方向、y方向和z方向的縮放比例

CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx,
    CGFloat sy, CGFloat sz)

CATransform3DRotate返回通過旋轉現有變換構造的變換矩陣，angle代表弧度，x,y,z代表各個軸上旋轉的弧度倍數

CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle,
    CGFloat x, CGFloat y, CGFloat z)

CATransform3DInvert返回反轉后的變換矩陣

CATransform3D CATransform3DInvert (CATransform3D t)

CATransform3DTranslate返回實現x/y/z軸上平移相應距離的變換矩陣

CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx,
    CGFloat ty, CGFloat tz)

CATransform3DConcat返回同時作用兩種變換矩陣的矩陣

CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b)

幾個特殊的變換矩陣
CATransform3DMakeScale/CATransform3DMakeRotation/CATransform3DMakeTranslation同樣是作用于原始視圖的變換矩陣

/* Returns a transform that translates by '(tx, ty, tz)':
 * t' =  [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]. */

CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz)

/* Returns a transform that scales by `(sx, sy, sz)':
 * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]. */

CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz)

/* Returns a transform that rotates by 'angle' radians about the vector
 * '(x, y, z)'. If the vector has length zero the identity transform is
 * returned. */

CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,
    CGFloat y, CGFloat z)
CATransform3DIdentity[1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1]，人畜無害矩陣，通常用于恢復初始狀態

4. 實現一個旋轉的三維立方體

import UIKit

class CATransform3DController: UIViewController {

    var animateCube = UIView.init()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Transform3D"
        self.view.backgroundColor = .white
        self.edgesForExtendedLayout = [UIRectEdge.left, UIRectEdge.right]

        self.testTransform3D()
    }
    
    func testTransform3D() {
        
        let targetRect = CGRect.init(x: 0, y: 0, width: 200, height: 200)
        animateCube.frame = targetRect
        animateCube.center = self.view.center
        self.view.addSubview(animateCube)
        
        let frontView = UIView.init(frame: targetRect)
        frontView.backgroundColor = UIColor.blue.withAlphaComponent(0.25)
        frontView.layer.transform = CATransform3DTranslate(frontView.layer.transform, 0, 0, 100)
        self.animateCube.addSubview(frontView)
        
        let backView = UIView.init(frame: targetRect)
        backView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        backView.layer.transform = CATransform3DTranslate(backView.layer.transform, 0, 0, -100)
        self.animateCube.addSubview(backView)
        
        let leftView = UIView.init(frame: targetRect)
        leftView.backgroundColor = UIColor.yellow.withAlphaComponent(0.5)
        leftView.layer.transform = CATransform3DTranslate(leftView.layer.transform, -100, 0, 0)
        leftView.layer.transform = CATransform3DRotate(leftView.layer.transform, CGFloat(Double.pi / 2.0), 0, 1, 0)
        self.animateCube.addSubview(leftView)
        
        let rightView = UIView.init(frame: targetRect)
        rightView.backgroundColor = UIColor.purple.withAlphaComponent(0.5)
        rightView.layer.transform = CATransform3DTranslate(rightView.layer.transform, 100, 0, 0)
        rightView.layer.transform = CATransform3DRotate(rightView.layer.transform, CGFloat(Double.pi / 2.0), 0, 1, 0)
        self.animateCube.addSubview(rightView)
        
        let headView = UIView.init(frame: targetRect)
        headView.backgroundColor = UIColor.orange.withAlphaComponent(0.5)
        headView.layer.transform = CATransform3DTranslate(headView.layer.transform, 0, 100, 0)
        headView.layer.transform = CATransform3DRotate(headView.layer.transform, CGFloat(Double.pi / 2.0), 1, 0, 0)
        self.animateCube.addSubview(headView)
        
        let footView = UIView.init(frame: targetRect)
        footView.backgroundColor = UIColor.green.withAlphaComponent(0.5)
        footView.layer.transform = CATransform3DTranslate(footView.layer.transform, 0, -100, 0)
        footView.layer.transform = CATransform3DRotate(footView.layer.transform, CGFloat(Double.pi / 2.0), -1, 0, 0)
        self.animateCube.addSubview(footView)
        
        self.animateCube.layer.borderColor = UIColor.red.cgColor
        self.animateCube.layer.borderWidth = 2.0
        
        //self.animateCube.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        
        //var transform3D: CATransform3D = CATransform3DIdentity
        //transform3D.m34 = -1.0 / 500.0
        //self.animateCube.layer.sublayerTransform = transform3D

        weak var weakSelf = self
        let angle = CGFloat(Double.pi) / -360.0
        var transform3D: CATransform3D = CATransform3DIdentity
        let timer = Timer.init(timeInterval: 1.0 / 60.0, repeats: true) { (_) in
            transform3D = CATransform3DRotate(transform3D, angle, 1, 1, 0.5)
            weakSelf!.animateCube.layer.sublayerTransform = transform3D
        }
        RunLoop.current.add(timer, forMode: RunLoop.Mode.common)
    }
}

示例：

旋轉的三維立方體

參考文章：
http://www.lxweimin.com/p/3dd14cfbdc53
https://my.oschina.net/u/2340880/blog/539878
感謝！

vx：dac_1033