У меня проблема с преобразованием css: scale (1.4), что делает текст размытым в Google Chrome, а также в некоторых случаях в Firefox.
В Google Chrome всегда размыто.
Обычно это работает в Firefox.Тем не менее, в Firefox видимость с обратной стороны имеет ошибки (с 2015 года ...) и нуждается в исправлении, которое можно сделать, применив transform: rotateX (0deg).Однако после применения исправления текст становится размытым!
Я перепробовал все решения из здесь и из пары других потоков stackoverflow.
Вот codepen.
И мой код:
body {
background: #eee;
font-family: 'Lato', sans-serif;
}
p {
color: #3b3b3a;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
color: #3b3b3a;
}
.blue {
color: #0e4b69!important;
}
.faded {
color:rgba(14,75,105,0.2)!important;
}
.card {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px;
perspective: 500px;
transition: all 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.4);
-webkit-font-smoothing: subpixel-antialiased;
}
.content {
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s ease;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateY( 180deg ) ;
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
color: #0e4b69;
backface-visibility: hidden;
border-radius : 12px;
-moz-border-radius : 12px;
-webkit-border-radius : 12px;
}
.front {
font-size:1.8rem;
text-align:left;
}
.back {
background: rgba(255,255,255,0.95);
color: #0e4b69;
transform: rotateY( 180deg );
}
.front-container img.number, .back-container img.number {
max-width:2.2rem;
}
.back-container img.number {
margin-left: -0.5rem;
margin-top: -0.5rem;
}
.front-container img.arrow {
max-width:3.8rem;
margin-right:-0.8rem;
float:right;
}
.front-container h3 {
margin-top: -2.1rem;
margin-left: 1.1rem;
margin-bottom:0px;
}
.back-container h5 {
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
text-align: center;
margin-top: -2.9rem;
margin-left: 0.4rem;
margin-bottom: 0.4rem;
}
.back-container p {
font-size:0.9rem;
text-align: justify;
margin-left: 0.6rem;
margin-top: 0px;
}
.front-container, .back-container {
padding:2rem;
}
<div class="card">
<div class="content">
<div class="front">
<div class="front-container">
<h3 class="blue">Having a vision and passion</h3>
</div>
</div>
<div class="back">
<div class="back-container">
<h5 class="blue">Having a vision and passion</h5>
<p>Being determined what I have to offer is my calling and purpose. Facing the nos, rejections, and failures. Overcoming limitations. Never settling or resting. Always finding another way. Constantly demanding more of myself. It takes everything and demands more.</p>
</div>
</div>
</div>
</div>