仅限CSS,无负载转换

Question

我有一个自定义复选框,其中填充了边框,颜色等的过渡以及3D转换以将其翻转.如果取消选中该复选框,它看起来很好并且在状态之间转换得很好,但是,如果复选框在dom加载时被赋予了checked属性,那么它必须旋转到位并且复选框在背面可见.

注意:虽然我链接了JsFiddle,所以你可以看到代码,问题不在小提琴中.只有通过样式表链接样式时才会发生这种情况.

https://jsfiddle.net/tj2djeej/

/* Radio & Checkbox */

input.flipCheckbox {
  -webkit-transition: transform .5s linear 0s;
  -webkit-transform-style: preserve-3d;
  -webkit-appearance: none;
  -webkit-transform: rotatey(0deg);
  -webkit-perspective: 800;
  -webkit-transform-style: preserve-3d;
  box-sizing: border-box;
  position: relative;
  outline: none;
  width: 26px;
  height: 26px;
  border: 3px solid #C15649;
  cursor: pointer;
}
input.flipCheckbox:checked {
  -webkit-transform: rotatey(180deg);
}
input.flipCheckbox:after {
  -webkit-transform: rotatey(-180deg);
  -webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s;
  -webkit-text-stroke-color: transparent;
  cursor: pointer;
  line-height: 26px;
  font-size: 14px;
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 1;
  top: -3px;
  left: -3px;
  color: transparent;
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: transparent;
}
input.flipCheckbox:checked:after {
  color: #C15649;
  -webkit-text-stroke-color: #C15649;
}
input.flipCheckbox:after {
  content: "\2713";
}

<input type="checkbox" class="flipCheckbox" />
<input type="checkbox" checked class="flipCheckbox" />

Answer 1

如果你只是想在未选中时隐藏复选标记,那就是backface-visibility: hidden.

input.flipCheckbox:after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

这应该为您简化很多事情.首先,您不再需要为透明复选标记的颜色设置动画.