"Card flip" a checkbox without exposing backface

Question

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/


Show source
| css   | checkbox   | transform   2016-10-06 01:10 1 Answers

Answers to &quot;Card flip&quot; a checkbox without exposing backface ( 1 )

  1. 2016-10-06 02:10

    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";
    }
    

Leave a reply to - "Card flip" a checkbox without exposing backface

◀ Go back