轮换时CALayers转换不正确

Question

鉴于如左图所示的CALayers的排列（背景，框架和文本层），我希望将它们中的两个旋转45°（layer.transform = CATransform3DMakeRotation(.pi / 4, 0, 0, 1)），导致右边的钻石，但我看到的是中间的对角线。

该元素包括父CALayer，背景图层，边框框架图层和文本图层。我希望能够将元素作为一个整体进行缩放和旋转，因此不可见的父图层和两个预先旋转的子元素：

class ScoreLayer: CALayer {
    var score = 0 {
        didSet {
            updateValue()
        }
    }

    let bgLayer: CALayer = {
        let layer = CALayer()
        layer.contentsScale = UIScreen.main.scale
        layer.backgroundColor = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
        layer.shadowOffset = .zero
        layer.shadowRadius = 3
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.4
        return layer
    }()

    let textLayer: CATextLayer = {
        let layer = CATextLayer()
        layer.contentsScale = UIScreen.main.scale
        layer.alignmentMode = .center
        layer.foregroundColor = UIColor.white.cgColor
        layer.fontSize = 20
        layer.font = UIFont.preferredFont(forTextStyle: .largeTitle)
        return layer
    }()

    let frameLayer: CALayer = {
        let layer = CALayer()
        layer.contentsScale = UIScreen.main.scale
        layer.borderColor = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
        layer.borderWidth = 3
        layer.shadowOffset = .zero
        layer.shadowRadius = 3
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.7
        return layer
    }()

    override init() {
        super.init()
        contentsScale = UIScreen.main.scale

        addSublayer(bgLayer)
        addSublayer(textLayer)
        addSublayer(frameLayer)

        updateValue()
    }

    override func layoutSublayers() {
        bgLayer.frame = bounds
        frameLayer.frame = bounds
        textLayer.frame = bounds

        bgLayer.transform = CATransform3DMakeRotation(.pi / 4, 0, 0, 1)
        frameLayer.transform = CATransform3DMakeRotation(.pi / 4, 0, 0, 1)
    }

    private func updateValue() {
        textLayer.string = "\(score)"
    }
}

动画旋转（通过CADisplayLink设置新变换），看起来旋转层也围绕自己的x轴旋转。我没有在代码清单中设置任何转换而不是两个。

是什么造成的？

Answer 1

应用变换后不要更新帧。 layoutSublayers被多次调用，复合效果会导致不必要的失真。在应用变换之前在其他地方设置一次帧，或者，如果需要帧更新（可能是为了响应方向更改），请确保删除变换更新帧然后重新应用变换。

编辑添加：

docs实际上明确地说“如果transform属性应用的旋转变换不是90度的倍数，则不设置帧”。