Введение
Я был бы очень признателен, если бы кто-нибудь дал мне знать, что я здесь делаю неправильно. Я новичок 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>