How to rotate UILabel as a whole

Question

I have written a code which should turn UILabel by Z axis and then by Y axis to simulate perspective. Here is the sample code:

var t: CATransform3D = CATransform3DIdentity
t = CATransform3DRotate(t, 270 * CGFloat.pi / 180, 0, 0, 1) // rotate by z axis
t = CATransform3DRotate(t, -50 * CGFloat.pi / 180, 0, 1, 0) // rotate by y axis
t.m34 = 1.0 / -500
logLabel.transform3D = t // implement sequence of rotations to label
contentView.addSubview(logLabel)

It rotates by Z axis correctly, but it does not rotate by Y axis. The second rotation makes the label to look narrow. How to simulate perspective?

aheze · Accepted Answer · 2020-10-02T16:34:03.927

2

Edit: You must set the m34 before you set the rotation.

var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, 65 * CGFloat.pi / 180, 1, 0, 0)
        
label.layer.transform = transform

Result:

Old answer:

You might want to change the m34

t.m34 = 1.0 / -500

This sets how "far" the label is... more details here

edited Oct 02 '20 at 16:34

answered Sep 28 '20 at 17:25

aheze

24,434
8
68
125

1

I added the code but it wasn't the effect expected. It seems like as the UILabel is 2d, and I try to emulate it on 3d space. It is narrower but I want beginning of the text to be smaller and the end to be bigger, i.e. trapezoid not rectangle :) – Marcin Żmigrodzki Sep 28 '20 at 19:36
Ah, ok. Have you found a solution yet? Sorry for the late response. – aheze Oct 02 '20 at 16:03
Just realized you need to set `m34` *before* you set the rotation. Edited my answer. – aheze Oct 02 '20 at 16:34
1

I wonder why the sequence of rotations is so important. – Marcin Żmigrodzki Oct 06 '20 at 09:14

How to rotate UILabel as a whole

1 Answers1

Linked