ios - my CATextLayer is getting blur after doing vertical flip,CATransform3D -

my goal is: @ initialization, can see "front text", if click on layer, vertically flip , see "back text".

this approach:

    /*create customlayer*/     customlayer                                 =   [[calayer alloc] init];      customlayer.backgroundcolor                 =   [[uicolor colorwithred:0.0/255 green:139.0/255 blue:149.0/255 alpha:1] cgcolor];     customlayer.opacity                         =   1;     [customlayer setframe:orangframe];     customlayer.anchorpoint                     =   cgpointmake(0.5, 0.5);     [customlayer setmaskstobounds:yes];     [customlayer setcornerradius:3];      // draw custom gradient     gradients                                   =   [cagradientlayer layer];     gradients.frame                             =   customlayer.bounds;     gradients.colors                            =   [nsarray arraywithobjects:                                                      (id)[uicolor colorwithwhite:1.0f alpha:0.1f].cgcolor,                                                      (id)[uicolor colorwithwhite:1.0f alpha:0.2f].cgcolor,                                                      (id)[uicolor colorwithwhite:0.75f alpha:0.2f].cgcolor,                                                      (id)[uicolor colorwithwhite:0.4f alpha:0.2f].cgcolor,                                                      (id)[uicolor colorwithwhite:1.0f alpha:0.4f].cgcolor,                                                      nil];       /* create fronttextlayer */     fronttextlayer                              =   [[catextlayer alloc] init];             cgrect labelframe                           =   cgrectinset(customlayer.bounds, 5.0, 10.0);     fronttextlayer.anchorpoint                  =   cgpointmake(0.5, 0.5);         [fronttextlayer setframe:labelframe];     fronttextlayer.doublesided                  =   yes;     fronttextlayer.backgroundcolor              =   [uicolor clearcolor].cgcolor;     [fronttextlayer setfont:@"montserrat-regular"];     [fronttextlayer setfontsize:16];         [fronttextlayer setstring:@"front text"];     [fronttextlayer setalignmentmode:kcaalignmentcenter];     [fronttextlayer setforegroundcolor:[[uicolor whitecolor] cgcolor]];     fronttextlayer.contentsscale                =   [[uiscreen mainscreen] scale];      /* create backtextlayer */     backtextlayer                               =   [[catextlayer alloc] init];             backtextlayer.anchorpoint                   =   cgpointmake(0.5, 0.5);             [backtextlayer setframe:labelframe];     backtextlayer.doublesided                   =   yes;     backtextlayer.backgroundcolor               =   [uicolor clearcolor].cgcolor;     [backtextlayer setfont:@"montserrat-regular"];     [backtextlayer setfontsize:16];             [backtextlayer setstring:@"back text"];     [backtextlayer setalignmentmode:kcaalignmentcenter];     [backtextlayer setforegroundcolor:[[uicolor whitecolor] cgcolor]];     backtextlayer.contentsscale                 =   [[uiscreen mainscreen] scale];      /* apply transformation backtextlayer */     catransform3d transfrom                     =   catransform3didentity;     transfrom.m34                               =   -1.0/ 500;     transfrom                                   =   catransform3drotate(transfrom, degtorad(180.0), 1, 0, 0);     backtextlayer.transform                     =   transfrom;       [self.viewholder.layer addsublayer:customlayer];     [customlayer insertsublayer:gradients atindex:0];         [customlayer addsublayer:fronttextlayer]; 

to handle click, i'm using:

- (void)touchesended:(nsset*)touches withevent:(uievent*)event {     uitouch *touch                      =   [[event alltouches] anyobject];     cgpoint touchlocation               =   [touch locationinview:self.viewholder];     bool islocatedincustomlayer         =   cgrectcontainspoint(customlayer.frame, touchlocation);      [self transformation:islocatedincustomlayer]; }  -(void)transformation:(bool)value {     if ( value) {         if ( !isclicked ) {             catransform3d transfrom     =   catransform3didentity;             transfrom.m34               =   -1.0/ 500;             transfrom                   =   catransform3drotate(transfrom, degtorad(180.0), 1, 0, 0);                                  /* remove fronttextlayer */             [fronttextlayer removefromsuperlayer];             [catransaction setcompletionblock:^{                 [catransaction begin];                 [catransaction setanimationduration:3];                 customlayer.transform   =   transfrom;                  /* add backtextlayer */                 [customlayer addsublayer:backtextlayer];                 [catransaction commit];              }];              isclicked       =   true;          }         else {             /* remove backtextlayer */             [backtextlayer removefromsuperlayer];              [catransaction setcompletionblock:^{                 [catransaction begin];                 [catransaction setanimationduration:.5];                 customlayer.transform   =   catransform3didentity;                  /* add fronttextlayer */                 [customlayer addsublayer:fronttextlayer];                 fronttextlayer.transform         =   catransform3didentity;                 [catransaction commit];              }];              isclicked       =   false;         }     } } 

everything expecting except backtext after transforming. looks not clear. pictures below.

front text:

back text:

all comments welcome!