While doing transition - rotateY, words get reversed - html

Question

I'm new to CSS3 and for the sake of learning it, I'm using CSS3d transform: rotateY property to rotate a button 180 with an ease transition. But due to 180 flip the words are shown in reversed. What can be done so that words in the button are shown in exactly the same manner before being rotate.
From what I've read so far is that I need to customize the back portion of the button but I don't know how to do that.
Here is my Codepen code: http://codepen.io/vikrantnegi007/pen/QbozLq
HTML:
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div><!-- /.jumbotron -->
</div>
CSS Code:
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
-webkit-transform: rotateY(180deg) scale(1.5);
transform: rotateY(180deg) scale(1.5);
}
button:active {
-webkit-transform: translate(1px, 1px) scale(0.9,0.9);
transform: translate(1px, 1px) scale(0.9, 0.9);
}

Answer 1

Generally when you rotate an element, the backside comes to the front and vice-versa. Since your background color is semi transparent, the reverse side is getting shown through.
One way to avoid the text being displayed in reverse is to put the text inside its own element (say a <span> tag) and then apply the reverse transform when the button is hovered on (like in the below snippet):
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
transform: rotateY(180deg) scale(1.5);
}
button:active {
transform: translate(1px, 1px);
transform: scale(0.9, 0.9);
}
button > span {
display: block;
transition: all 1s ease;
}
button:hover > span {
transform: rotateY(-180deg);
}
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1"><span>btn1</span></button>
<button id="btn2"><span>btn1</span></button>
<button id="btn3"><span>btn1</span></button>
<button id="btn4"><span>btn1</span></button>
</div>
<!-- /.jumbotron -->
</div>
An alternate method would be to create a backside for the element and then make it get displayed when the button is being hovered on (like you had mentioned in question). You can find a sample for that in my answer here.