「カードフリップ」チェックボックスにバックフェイスを表示しない

Question

チェックボックスをオンにすると、3D水平フリップ変換が適用されます。標準の入力チェックボックスを使用して、余分なdivやスパンを追加する必要はありません。私はそれを使用して動作するようになった：擬似要素の後に唯一の問題は、ボックスをチェックすると、フリップが発生する前にチェックマークが表示されます。私はバックフェイス - 可視性を隠してみましたが、それはバックフェイスなので側面の1つが見えなくなってしまいます。

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を追加し、input:after擬似要素、不要なアニメーションにcontent:"\2713"を設定します。 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"; 
}