I am currently working on implementing a CSS flip animation that I found here into my website. The animation itself is functioning properly, but I am facing an issue with aligning the text I want to include in the center of both the front and back sides. While I could adjust padding, font size, or text size individually, I am curious if there is another method to achieve proper center alignment for everything.
Once I can get the text centered, I plan on resizing the larger portions of text on the back side separately.
To better understand the problem I am facing, please refer to the following jsfiddle link:
Examples: https://jsfiddle.net/glueckskind/kfhy7fh3/
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
/* ADDED */
margin: auto;
padding: 0;
}
/* flip the panel when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 340px;
height: 100px;
display: inline-block;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
/* ADDED */
text-align: center;
}
/* hide back of panel during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
/* ADDED */
font-family: 'Raleway', sans-serif;
font-size: 22px;
}
/* front panel, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
/* ADDED */
/* padding: 10px; makes one line ok */
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.5)
}
/* back, initially hidden panel */
.back {
transform: rotateY(180deg);
/* ADDED */
/* padding: 10px; makes one line ok */
border: 1px solid rgba(0, 0, 0, 0.9);
}