"Card flips" check box without expanding the back

Question

I want to check the three-dimensional horizontal flip check. I want to use a standard input checkbox so as not to add extra divs either around or inside it. I got it to work using: after the psuedo elements, the only problem is when I check the box before the flip happens. I tried hidden hidden visibility, but this leads to the fact that one of the sides is invisible, since this is the reverse side.

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://jsfiddle.net/Lrzyggkp/

Answer 1

EDIT: color:transparent content:"\2713" input:after , . http://jsfiddle.net/Lrzyggkp/6/

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: "\2713";
  color: transparent;
}

input:checked:after {
  -webkit-transform: rotatey(0deg);
  background: blue;
  border: 1px solid white;
  color: white;
  cursor: pointer;
  content: "\2713";
}