我想给复选框一个选中的 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";
}
最佳答案
编辑:只需添加 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";
}
关于css - "Card flip"不暴露背面的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39885292/