DasBeasto DasBeasto - 2 months ago 7
CSS Question

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

Answer

EDIT: just add color:transparent and set content:"\2713"on input:after pseudo element, no animation needed. 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";
}