我正在尝试仅使用HTML和CSS实现翻页卡菜单。几乎完成了所有操作,只是卡的背面在接收第一个悬停状态时需要一些时间才能显示。这样做只是在90度进行平滑过渡,然后立即显示最终结果(在最后90度不再进行平滑过渡)。
第一次悬停后,一切正常。
有什么建议吗?
编辑:下面的代码段已被编辑以适合正确的答案。
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
.main{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Open Sans', sans-serif;
background-color: #000;
}
.header{
color:white;
font-size: 2vh;
margin-bottom: 2vh;
}
.header a{
text-decoration: none;
color: white;
font-weight: bold;
}
.card{
background-color: transparent;
width: 30vh;
height: 50vh;
perspective: 1000px;
perspective-origin: center;
margin-right: 0.5vh;
}
.card > .card-container{
position: relative;
width: 100%;
height: 100%;
transition: 1s transform ease;
transform-style: preserve-3d;
background-color: transparent;
}
.card:hover > .card-container{
transform: rotateY(180deg);
}
.card-container > .front,.card-container > .back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.card-container > .front{
background-image: linear-gradient(to bottom right,red, yellow);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5vh;
color: white;
font-size: 3vh;
cursor: pointer;
backface-visibility: hidden;
}
.card-container > .back{
background-color: transparent;
color: white;
font-size: 3vh;
transform: rotateY(180deg);
cursor: pointer;
}
.back > ul{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
perspective: 1000px;
perspective-origin: center ;
}
.back > ul > li{
text-align: center;
height: calc(100% - (0.2vh * 4) /5);
width: 100%;
transition: 1s transform ease;
transform-style: preserve-3d;
}
.back > ul > li:not(:last-child){
margin-bottom: 0.2vh;
}
.back > ul > li > .child-front, .back > ul > li > .child-back {
backface-visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
border-radius: 0.5vh;
}
.back > ul > li > .child-front{
background-image: linear-gradient(to bottom left,red, orange);
display: flex;
justify-content: center;
align-items: center;
}
.back > ul > li > .child-back{
background-color: orange;
transform: rotateX(180deg);
display: flex;
justify-content: center;
align-items: center;
}
.back > ul > li:hover{
transform: rotateX(180deg);
}
.child-back span, .child-front span{
color: white;
display: block;
}
.child-back span{
font-weight: bold;
}
<div class="main">
<div class="header">
Find me on <a href="https://github.com/ican17/flipmenu">Github</a>
</div>
<div class="card">
<div class="card-container">
<div class="front">
<span>Hover here</span>
</div>
<div class="back">
<ul class="menu">
<li class="child">
<div class="child-front"><span>Hover here</span></div>
<div class="child-back"><span>ITEM1</span></div>
</li>
<li class="child">
<div class="child-front"><span>Hover here</span></div>
<div class="child-back"><span>ITEM2</span></div>
</li>
<li class="child">
<div class="child-front"><span>Hover here</span></div>
<div class="child-back"><span>ITEM3</span></div>
</li>
<li class="child">
<div class="child-front"><span>Hover here</span></div>
<div class="child-back"><span>ITEM4</span></div>
</li>
<li class="child">
<div class="child-front"><span>Hover here</span></div>
<div class="child-back"><span>ITEM5</span></div>
</li>
</ul>
</div>
</div>
</div>
</div>
删除backface-visibility: hidden;
:
.card-container > .front,.card-container > .back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
它实际上旋转180deg
,但是由于backface-visibility
,您看不到整个变换。旋转完成后向您显示。