css - "Card flip"不暴露背面的复选框

Question

我想给复选框一个选中的 3D 水平翻转变换。我想使用标准输入复选框，因此不会在其周围或内部添加额外的 div 或跨度。我使用 :after psuedo 元素让它工作，唯一的问题是当我选中复选框时，复选标记出现在翻转发生之前。我尝试隐藏背面可见性，但这会导致其中一侧不可见，因为它是背面。

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

编辑:只需添加 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";
}