翻转卡有问题,RotationY会在调整浏览器大小时产生空白区域。
请记住,我必须继续使用父div的百分比,我的意思是在下面的小提琴中显示相同的网格样式。
我已经翻转了所有方框,以便在翻转后看到问题,因此您可以调整窗口大小并查看导致的问题。
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
答案 0 :(得分:0)
根据您的上一条评论,我认为问题出在这个课程上:
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
将width:100%
更改为width:100px
(或200px某个数字)。
当您根据父容器(和浏览器窗口)使用%containers resize时。
答案 1 :(得分:0)
执行3d变换时,这是一个常见问题。
一种解决方法是使用带有卡片颜色的1px
边框(如果可能的话)
例如,使用您提供的代码,这将是一个解决方案
body {
background: #000;
padding: 0;
margin: 0;
}
.os_set {
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-auto-rows: 50% 50% 50% 50% 50%;
grid-gap: 0;
justify-items: stretch;
align-items: stretch;
}
.os_box {
line-height: 203px;
text-align: center;
position: relative;
perspective: 800px;
-webkit-perspective: 800px;
cursor: default;
z-index: 99;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#card .front {
background: #fff;
}
#card .back {
background: #ccc;
transform: rotateY( 180deg);
border:1px solid #ccc; /* added this */
}
#card.flipped {
transform: rotateY( 180deg);
}
<div class="os_set">
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
<div class="os_box">
<div id="card" class="flipped">
<figure class="front">Front</figure>
<figure class="back">Back</figure>
</div>
</div>
</div>