我的“复选框黑客”在切换状态时没有做任何事情。
我有一个正在旋转的 3d 立方体,我希望它在单击时会旋转并变大,因此我尝试使用复选框 hack 来更改处于切换状态时的动画。但是,无论我做什么(即更改元素的背景颜色、更改字体大小、更改 .cube 的比例等),当标签处于切换状态时,绝对不会发生任何事情。有人可以帮我弄清楚我做错了什么吗?
这是我当前的代码。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
width: 100vw;
height: auto;
}
body {
width: 100%;
height: 100%;
background-color: antiquewhite;
color: #333;
font-size: 100px;
}
.cube {
transform-style: preserve-3d;
transform-origin: right;
top: calc(50%);
left: calc(50%);
position: absolute;
animation: rotateCube 8s infinite linear;
}
label {
position: absolute;
top: calc(50% - 1em);
left: calc(50% - 1em);
height: 2em;
width: 2em;
z-index: 10;
}
#toggle {
position: absolute;
opacity: 1;
}
.face {
height: 2em;
width: 2em;
background-color: whitesmoke;
position: absolute;
margin: -1em;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 2px #555, inset -1px 0px 2px #555;
}
.face span {
font-size: 50px;
}
.front {
transform: translateZ(1em);
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.back {
transform: rotateY(180deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.top {
transform: rotateX(90deg) translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em)
}
input:checked~.face {
background-color: blue;
animation: rotateCube2 8s forwards;
}
@keyframes rotateCube {
0% {
transform: rotateY(0deg) rotateX(-15deg);
}
50% {
transform: rotateY(360deg) rotateX(15deg)
}
100% {
transform: rotateY(720deg) rotateX(-15deg)
}
}
@keyframes rotateCube2 {
50% {
transform: rotateY(90deg) rotateX(90deg);
}
100% {
transform: rotateY(180deg) rotateX(180deg);
}
}
<div class="cube-button">
<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div class="cube">
<div class="face front"><span>Click Me</span></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句