How to set UIScrollView like 3D Square

Question

I am working on Photo Editing App and I have 3 Scrollviews with UIImageview, I want to set ScrollViews as Below

I had Tried "Scenekit" but It won't work because I want ScrollableView.

Basically I want to create 3D collage
Is there any other way to do this?

Is it Possible to set UIScrollView Like 3d Square?

Answer 1

I Achieve this using CATransform3D using Following Code

I have created 3 Scrollview with UIImageview in StoryBoard

@IBOutlet var faces: [UIView]!

ViewDidiLoad

    var perspective: CATransform3D = CATransform3DIdentity
    perspective.m34 = -1.0 / 500.0

    self.view?.layer.sublayerTransform = perspective

    perspective = CATransform3DRotate(perspective, CGFloat(-Double.pi / 4), 1, 0, 0)
    perspective = CATransform3DRotate(perspective, CGFloat(-Double.pi / 4), 0, 1, 0)

    print(perspective)

    self.view.layer.sublayerTransform = perspective

    //add cube face 1
    var transform: CATransform3D = CATransform3DMakeTranslation(0, 0, 50)
    addFace(0, withTransform: transform)

    //add cube face 2
    transform = CATransform3DMakeTranslation(50, 0, 0)
    transform = CATransform3DRotate(transform, CGFloat(Double.pi / 2), 0, 1, 0)

    addFace(1, withTransform: transform)

    //add cube face 3
    transform = CATransform3DMakeTranslation(0, -50, 0)
    transform = CATransform3DRotate(transform, CGFloat(Double.pi / 2), 1, 0, 0)

    addFace(2, withTransform: transform)

addFace Function

func addFace(_ index: Int, withTransform transform: CATransform3D) {
    let face: UIView? = faces[index]

    if let aFace = face {
        self.view.addSubview(aFace)
    }

    let containerSize: CGSize? = self.view.bounds.size

    face?.center = CGPoint(x: (containerSize?.width ?? 0.0) / 2.0, y: (containerSize?.height ?? 0.0) / 2.0)
    face?.layer.transform = transform
}

Output