我有4张纸牌平放并“悬停”在悬停上,但由于正面和反面它们也会翻转。我只想要单面卡片,但我不知道如何阻止它们翻转。我删除了卡片背面的html,但是似乎无法停止CSS中卡片的翻转。我需要更改代码以阻止它们翻转吗?
.card-holder {
width: 90%;
height: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -370em;
text-align: center;
}
div:target .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
div:target .card-face:before {
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card {
display: inline-block;
perspective: 1000px;
position: relative;
margin: 50px;
}
.card:hover .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
.card:before{
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card-face {
display: block;
width: 139px;
height: 250px;
transform-origin: bottom;
animation: flip 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.front-card, .project-img {
width: inherit;
height: inherit;
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
transform-origin: bottom;
animation: shadow 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.card-face {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front-card {
/* backface-visibility: hidden; */
position: absolute;
top: 0;
left: 0;
}
/* .back-card {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} */
.front-card {
transform: rotateY(180deg);
}
@keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
@keyframes shadow {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;
}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
}
/* @keyframes flip-2 {
0% {
transform: rotateX(50deg) rotateY(0deg);}
60% {
transform: rotateX(0deg); }
100% {
transform: rotateX(0deg) rotateY(180deg);}
} */
@keyframes shadow-2 {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
}
<div class="card-holder" id="all-cards">
<div class="card" id="card-1">
<a href="#card-1" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
</div>
</a>
</div>
<div class="card" id="card-2">
<a href="#card-2" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
</div>
</a>
</div>
</div>
答案 0 :(得分:0)
从...删除此行var test = (from p in main.product
from r in main.price
where !p.price.Any() || r.UpdateTime >= checkdate
select p.main.productid).Take(5);
100% {
transform: rotateX(0deg) rotateY(180deg);
}