0

Possible Duplicate:
How do I apply a perspective transform to a UIView?

Hi I am trying to tilt an UIView like this : enter image description here

I want to do it using CATransform3DRotate and other Core functions. Is it possible?

What I have done so far: I have a method in which I create a orange colored view named LowerTable.

-(void)createShelf
{
    CGRect parentFrame=parent.frame;
    float width=200;
    float height=200;
    lowerTable=[[UIView alloc] init];
    lowerTable.backgroundColor=[UIColor orangeColor];
    lowerTable.frame=CGRectMake(60, parentFrame.size.height/2, width, height);
    [self setAnchorPoint:CGPointMake(0.5, 0) forLayer:lowerTable.layer];
    [parent addSubview:lowerTable];

}

The setAnchorPoint method is as below:

//sets the anchor point of the layer in proper place.
-(void)setAnchorPoint:(CGPoint)anchorPoint forLayer:(CALayer *)layer
{
    CGPoint newPoint = CGPointMake(layer.bounds.size.width * anchorPoint.x, layer.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(layer.bounds.size.width * layer.anchorPoint.x, layer.bounds.size.height * layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint,CATransform3DGetAffineTransform(layer.transform));
    oldPoint = CGPointApplyAffineTransform(oldPoint,CATransform3DGetAffineTransform(layer.transform));

    CGPoint position = layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    layer.position = position;
    layer.anchorPoint = anchorPoint;
}

Once anchor point and the view is set I am calling the following method on tapping a button ,to apply the transform :

-(void)animateLayer:(CALayer *)layer
{
    [UIView animateWithDuration:2 delay:0.0 options:UIViewAnimationOptionAllowAnimatedContent animations:^{
        CATransform3D _3Dt = layer.transform;
        _3Dt = CATransform3DRotate(_3Dt, 30*M_PI/180, 1, 0, 0.0);
        layer.zPosition=2000;
        layer.transform=_3Dt;

    } completion:^(BOOL finished) {
    }];

}

What it is doing is that simply decreasing the height of the UIView, which is obvious, with angle transform the view needs to be shaped as my given picture. But I'm unable and I have tried many ways. Please help me with some examples and clear explanation.

Thanks in advance.

Community
  • 1
  • 1
Munim
  • 2,476
  • 1
  • 18
  • 27
  • 1
    [How do I apply a perspective transform to a UIView?](http://stackoverflow.com/questions/347721/how-do-i-apply-a-perspective-transform-to-a-uiview) – Anne Jun 27 '12 at 19:30
  • Maybe ignorant, but dont you want to rotate about the y axis, not the x? – trumpetlicks Jun 27 '12 at 19:37
  • http://stackoverflow.com/questions/347721/how-do-i-apply-a-perspective-transform-to-a-uiview – trumpetlicks Jun 27 '12 at 19:49
  • As I describe in my answer in the linked question, the key element here is setting the `m34` element in the CATransform3D to a small negative value. You should be able to insert that into your above `-animateLayer:` method and have it work as you want. – Brad Larson Jun 27 '12 at 21:44
  • Sorry to say, but it didn't solve my problem. It's still looking the same. Please help me! :( – Munim Jun 28 '12 at 13:47
  • Hi, @BradLarson it seems quite unusual to me. I was trying this code after getting your suggestion: `CATransform3D _3Dt = CATransform3DIdentity; _3Dt = CATransform3DRotate(_3Dt, 45.0f*M_PI/180.0f, 1, 0, 0); _3Dt.m34=1/-500; imageView.layer.transform=_3Dt;` Where imageView is a view inside my main view. It **didn't work**. But as soon as I copied your code and applied it,one of the views that was added to my app in Interface Builder(was subviews[0],I guess), it worked just fine! I don't get it! Can you help me about what I was wrong? Thanks in advance. – Munim Jun 28 '12 at 14:32
  • Try moving the `_3Dt.m34=1/-500;` line before your `CATransform3DRotate()`. Order of operation matters when applying transformations, and I believe that's how you'll get a proper perspective. – Brad Larson Jun 28 '12 at 14:39
  • Yeah great it's fixed! But kind of weird things are still happening. I'm calling this transform code inside an animation block. That animation block is fired once you click on a button. If I keep tapping the button continuously the view rotates in perspective, but with continuous taps it seems losing perspective view slowly and some time after it loses it totally. Can you please tell me what's happening? – Munim Jun 28 '12 at 16:31

0 Answers0