У меня странная проблема. Это происходит только при первоначальном переворачивании карты.
У меня есть текст, который отображается поверх градиентного фона. Это фоновое изображение показывает при наведении мыши.
Текст показывается за доли секунды, а затем просто всплывает. Мне нужно, чтобы текст уже был там, когда изображение перевернуто или, по крайней мере, имеет плавный переход, если это невозможно. Я проследил это до размещения текста в разных углах изображения. Если я уберу css для размещения текста, то он будет отображаться и нормально работать.
Вот Html
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back linear-gradient">
<h1 class="info">{{getTitle()}}</h1>
<p class="info-bottom-right">{{getTitle()}}</p>
<p class="info-bottom-left">{{getTitle()}}</p>
</div>
</div>
</div>
Вот css
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
cursor: pointer;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
.info{
display: block;
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-weight: bold;
}
.info-bottom-right{
display: block;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-weight: bold;
}
.info-bottom-left{
display: block;
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-weight: bold;
}
Вот блик стека, показывающий фактическую проблему
https://stackblitz.com/edit/angular-eyo4a8-sura86?file=app%2Fdatepicker-date-class-example.css