Question

所以，我正在开发一个带有图像网格的交互式菜单，这些图像会翻转并显示背面链接的信息。您可以看到我在这里尝试做的实时演示Card Flip Demo。我希望能够做的是确保翻转和缩放的元素在屏幕上完全可见。目前，唯一的翻转元素在动画后很大程度上是在屏幕外。

有没有办法用更一般的css规则来实现这一点，或者我是否必须为每个翻转的元素指定结束位置（或者至少是最终屏幕结束的那个？是什么我＆＃39 ; d想要实现的是元素完全放在屏幕上，靠近它的原始位置。

这里是html

<div class="sdgs">
<div class="flip">
    <div class="front">
        <img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" width="140" height="140" />
    </div>
    <div class="back">
    <h3><a>ARED</a></h3>
    <h3><a>AgroCenta</a></h3>
    <h3><a href="#Tilly">Tilly's Farm</a></h3>
    </div>
</div>

这里是css

.sdgs{
-webkit-perspective:650px;
perspective:650px;
}
.front, .back{
height:140px;
width:140px;
position:absolute;
top:0;
left:0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip{
position: relative;
height:140px;
width:140px;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip:hover{
-webkit-transform: rotateY(180deg) scale(2);
transform: rotateY(180deg) scale(2);
}
.front, .back{
height:140px;
width:140px;
position:absolute;
top:0;
left:0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
filter: blur(0);
}
.back{
-webkit-transform: rotateY(180deg) scale(2);
transform: rotateY(180deg) scale(2);
background-color: white;
}

如何在css3动画后将元素保留在屏幕上？

0 个答案: