我试图制作一组翻转的div ......有点像翻看记事卡。
似乎当我徘徊时,它翻转并变白,因为我没有显示。我不知道如何让另一个(.back)显示出来。
这是我创造的小提琴 https://jsfiddle.net/q2ukg0cz/
这很简单:
<div class="flip-card">
<div class=front">Hello</div>
<div class="back">World</div>
</div>
我不确定在这种情况下我做错了什么。
div.flip-card {
display: block;
width: 200px;
height: 200px;
-webkit-perspective: 600px;
perspective: 600px;
}
div.flip-card > div.front,
div.flip-card > div.back {
display: block;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding-top: 1em;
border: 1px solid #000;
color: #fff;
font-size: 3em;
text-align: center;
text-shadow: -1px -1px rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
div.flip-card > div.front {
background: #888;
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
div.flip-card > div.back {
background: #444;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
div.flip-card > div.front:hover {
background: #444;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip-card > div.back:hover {
background: #888;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
答案 0 :(得分:1)
问题在于您的选择器触发了触发器
jsFiddle
试试这个
div.flip-card {
display: block;
width: 200px;
height: 200px;
-webkit-perspective: 600px;
perspective: 600px;
}
div.flip-card > div.front,
div.flip-card > div.back {
display: block;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding-top: 1em;
border: 1px solid #000;
color: #fff;
font-size: 3em;
text-align: center;
text-shadow: -1px -1px rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
div.flip-card > div.front {
background: #888;
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
div.flip-card > div.back {
background: #444;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
div.flip-card:hover > div.front {
background: #444;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip-card:hover > div.back {
background: #888;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}