У меня есть настраиваемый флажок, который заполняется переходами для границы, цвета и т.д., а также для 3D-преобразования, чтобы перевернуть его. Если флажок снят, он отлично выглядит и прекрасно переходит между состояниями, однако, если флажку задан атрибут checked на загрузке dom, тогда он должен встать на место, и флажок будет виден на обратной стороне.
ПРИМЕЧАНИЕ.. Хотя я связываю 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" />