I am working on a web page that animates boxes and displays text details. However, I am facing an issue where the text does not align properly inside the flipped box.
I would like to decrease the font size of the text in the flipped box. Despite trying to adjust the alignment, the text remains unaffected. My goal is to keep all the text neatly contained within the box boundaries.
flexbox{
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.panels{
list-style-type: none;
padding: 0;
width: 100%;
margin: 2% auto;
}
.panels li{
position: relative;
width: 20%;
margin: 5px;
display: block;
box-sizing: border-box;
float: left
}
.panels li div{
width: 100%;
padding: 50% 0;
text-align: center;
line-height: 0;
cursor: pointer;
-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0,0.2);
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
}
.panels div.back{
background: linear-gradient(to bottom, #e40000, #f07611);
transform: rotateY(90deg);
font-family: Cabin;
font-size: 1.4707843137254901vw;
color: #3d4250;
position: absolute;
left: 0;
top:0;
}
.panel div.front{
background: white;
font-family: Cabin;
font-size: 1.9607843137254901vw;
color: #3d4250;
position: relative;
}
/*// ANIMATION STYLES //*/
.panels li:hover div.front{
animation: twirl 0.2s ease-in forwards;
}
.panels li:hover div.back{
animation: twirl 0.2s 0.2s ease-in forwards reverse;
}
@keyframes twirl{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(90deg);
}
}<ul class="panels flexbox">
<li>
<div class="front">Sense of Purpose</div>
<div class="back"><h6>Sense of purpose</h6>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</li>
<li>
<div class="front" style="background: #9126f4">Get to</div>
<div class="back">The chopper</div>
</li>
<li>
<div class="front" style="background: #21bf3b">foo</div>
<div class="back">bar</div>
</li>
<li>
<div class="front" style="background: #c3333d">tempus</div>
<div class="back" >fugit</div>
</li>
<li>
<div class="front" style="background: #c3333d">html</div>
<div class="back">rocks</div>
</li>
<li>
<div class="front" style="background: #21bf3b">A</div>
<div class="back">B</div>
</li>
<li>
<div class="front" style="background: #9126f4">Super</div>
<div class="back" >Mariokart</div>
</li>
<li>
<div class="front" style="background: #267df4">j</div>
<div class="back">Query</div>
</li>
</ul>