"Card flip" a checkbox without exposing backface

I want to give a checkbox a 3D horizontal flip transformation on checked. I want to use standard input checkbox so no adding extra divs or spans around or inside it. I got it to work using :after psuedo elements the only problem is when I check the box the checkmark appears before the flip happens. I tried backface-visibility hidden but that results in one of the sides being invisible since it is the backface.

html:

<input type="checkbox"/>

css:

input{
-webkit-appearance:none;
}
input:after{
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 1s;
   -webkit-transform: rotatey(-180deg);
   -webkit-perspective: 800;
   background:white;
   border: 1px solid gray;
   line-height:20px;
   width:20px;
   height:20px;
   position: absolute;
   z-index: 1;
   text-align: center;
   content:"";
}
input:checked:after{
  -webkit-transform: rotatey(0deg);
    background: blue;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    content:"\2713";      
}

http://ift.tt/2dLyrFP