css - 动画期间元素不可见
问题描述
介绍
如果有人能让我知道我在这里做错了什么,我将不胜感激。我是第一次使用 CSS 用户,我真的很难过。如果有人可以提供帮助,我将不胜感激。
作为礼物,我将链接到我在 defold 中制作的游戏:teeeth.itch.io/bikiniverse(html5,无法在手机上运行)。提前谢谢了。
-
客观的:
创建 3D 开书动画。应该在尽可能多的浏览器上工作。
-
问题:
封面元素在经过 180 度后在动画期间变得不可见。动画完成后,它会再次可见(如果您运行下面的代码,问题应该会立即清晰)。
如果有什么我错过的东西可以使它与早期的浏览器兼容,我将不胜感激。
-
<!DOCTYPE html><html>
<head>
<style>
.flip-card {
-ms-transform: translate(20px, 0px) rotate(-3deg); /* IE 9 */
-webkit-transform: translate(20px, 0px) rotate(-3deg);
-webkit-perspective: 1000px; /* Safari 4-8 */
-webkit-perspective-origin: bottom; /* Safari 4-8 */
perspective-origin: bottom;
transform: translate(20px, 0px) rotate(-3deg);
background-color: transparent;
width: 150px;
height: 100px;
perspective: 1000px;
text-align: right;
}
.flip-card-inner {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 3s;
-webkit-animation-name: opener;
-webkit-animation-duration: 3s;
animation-name: opener;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: 1;
}
.flip-card-inner {
position: relative;
top: -140px;
right: 0px;
text-align: center;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
backface-visibility: hidden;
}
.flip-card-front {
position: absolute;
right: -195px;
color: black;
z-index: 2;
top: -214px;
}
.flip-card-back {
position: absolute;
right: -155px;
top: -184px;
transform: rotateY(180deg);
z-index: 0;
width: 350px;
height: 250px;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes opener {
0% {transform:rotateY(0deg)}
100% {transform:rotateY(-100deg)}
}
/* Standard syntax */
@keyframes opener {
0% {transform:rotateY(0deg)}
100% {transform:rotateY(-100deg)}
}
</style>
</head>
<body>
<div class="flip-card">
<svg width="290" height="350">
<rect x="70" y="30" rx="3" ry="3" width="220" height="310"style="fill:#ff5151"/>
<rect x="283" y="40" rx="3" ry="3" width="1" height="294" style="fill:beige" />
<rect x="282" y="40" rx="3" ry="3" width="1" height="294" style="fill:grey" />
<rect x="281" y="40" rx="3" ry="3" width="1" height="293" style="fill:beige" />
<rect x="280" y="40" rx="3" ry="3" width="1" height="293" style="fill:grey" />
<rect x="279" y="40" rx="3" ry="3" width="1" height="292" style="fill:beige" />
<rect x="278" y="40" rx="3" ry="3" width="1" height="292" style="fill:grey" />
<rect x="277" y="40" rx="3" ry="3" width="1" height="291" style="fill:beige" />
<rect x="276" y="40" rx="3" ry="3" width="1" height="291" style="fill:grey" />
<rect x="75" y="40" rx="3" ry="3" width="201" height="290" style="fill:#FFFFF0" />
<text x="81" y="75" font-size="17">196: </text>
<text x="81" y="125" font-size="17">You have a magic envelope</text>
<text x="81" y="143" font-size="17">which, when opened, says</text>
<text x="81" y="162" font-size="17">the date of your death. </text>
<text x="81" y="176" font-size="17"></text>
<text x="81" y="194" font-size="17">Do you open the envelope? </text>
<rect x="75" y="329" rx="3" ry="3" width="205" height="1" style="fill:grey" />
<rect x="75" y="330" rx="3" ry="3" width="206" height="1" style="fill:beige" />
<rect x="75" y="331" rx="3" ry="3" width="207" height="1" style="fill:grey" />
<rect x="75" y="332" rx="3" ry="3" width="208" height="1" style="fill:beige" />
<rect x="75" y="333" rx="3" ry="3" width="209" height="1" style="fill:grey" />
</svg>
<div class="flip-card-inner" id="frontcover">
<div class="flip-card-front" >
<svg width="370" height="350"><rect x=99 y=30 rx="3" ry="3" width="220" height="310" style="fill:#ff5151"/><text x="120" y="130" font-family="Times New Roman" font-size="40" style="fill:#222222" font-style="italic">Malas </text><text x="120" y="165" font-style="italic" font-family="Times New Roman" style="fill:#222222" font-size="40">Decisiones </text></svg>
</div>
<div class="flip-card-back">
<svg width="370" height="350">
<rect x="00" y="0" rx="3" ry="3" width="220" height="310" style="fill:#ff5151"/>
<rect x="19" y="10" rx="3" ry="3" width="2" height="287" style="fill:beige" />
<rect x="21" y="11" rx="3" ry="3" width="2" height="288" style="fill:grey" />
<rect x="23" y="12" rx="3" ry="3" width="2" height="289" style="fill:beige" />
<rect x="25" y="13" rx="3" ry="3" width="2" height="290" style="fill:grey" />
<rect x="27" y="14" rx="3" ry="3" width="2" height="291" style="fill:beige" />
<rect x="29" y="15" rx="3" ry="3" width="2" height="292" style="fill:grey" />
<rect x="30" y="299" rx="3" ry="3" width="201" height="2" style="fill:grey" />
<rect x="29" y="300" rx="3" ry="3" width="202" height="2" style="fill:beige" />
<rect x="28" y="301" rx="3" ry="3" width="203" height="2" style="fill:grey" />
<rect x="27" y="302" rx="3" ry="3" width="204" height="2" style="fill:beige" />
<rect x="26" y="303" rx="3" ry="3" width="205" height="2" style="fill:grey" />
<rect x="25" y="304" rx="3" ry="3" width="206" height="1" style="fill:beige" />
<rect x="24" y="10" rx="3" ry="3" width="207" height="289" style="fill:#FFFFE0" />
</svg>
</div>
</div>
</div>
<script>
{
document.getElementById(id="frontcover").style.WebkitBackfaceVisibility = "hidden";
document.getElementById(id="frontcover").style.backfaceVisibility = "hidden";
}
</script>
</body>
</html>
解决方案
推荐阅读
- node.js - npm install 失败,代码为 ELIFECYCLE。在 node-expat@2.3.18 安装脚本失败
- asp.net - filter date with datatables in asp.net
- java - Why is it that my class is showing as not being used and thus can't compile my program?
- c# - gRPC import already existing data classes C#
- python - 通过Django模板中的其他对象值访问对象值?
- xpages - .png icons are not displaying after upgrading to Domino V10 FP4
- ios - Isn't layoutSubviews supposed to get called once per frame only?
- c# - 使用 XML 文档作为 DataTable 的数据源
- android - 导航栏应该在 android 快餐栏的顶部吗?
- python - Cassandra 3.x 读取性能,每行 100 列