テキストは左に飛んでいます。CSSのフリップフロップのフリップフロップで

Question

私はこのCSSカードを使っています。私はそれを完全にホバー上で働いている。私はいくつかのjqueryをクリックしてフリップを許可するように追加しましたが、カード内にレイアウトされているものは、カードが反転する前に左に移動するようになりました。私がそれを修正するために何ができるかわからない。私はたくさんのことを試しましたが、何が原因なのかは分かりません。私はcodepenを付けています。

申し訳ありませんが、下のコードの貼り付けに間違いがあります。それであなたはあなたのペンをコードwに掲示するように強制します。ペンを見ると見るのが簡単です。ここで

は、ペンが続く私のコードです：

<div class="container2"> 
    <div class="card2"> 

    <div class="face front"> 
     <img width="300px" src="logo.svg"> 
    </div> 

    <div class="face back"> 
     <h3>Web Ascender</h3> 
     <p>Web Ascender is an innovation services company that truly cares about your happiness and the success of your project. We are leaders in web development, mobile applications and internet marketing, but our team doesn't just make beautiful digital products. We successfully solve real problems for people and businesses.</p> 
     <a href="/Contact" class="btn btn-block btn-outline">Learn More &rsaquo;</a> 
    </div> 

    </div> 
</div> 

    .container2{ 
    width:400px;height:300px; 
    position: relative; 
    perspective: 800px; 
    margin:0 auto; 
} 
.card2{ 
    text-align:center; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.card2 h3{color:#fff;} 
.card2 p{color:#fff;font-family: 'Lato', sans-serif;font-weight:300;} 


.front { 
    transform: rotateY(-180deg); 
} 
.back { 
    transform: rotateY(0deg); 
} 

/*.card2:hover .front { 
    transform: rotateY(-180deg); 
} 
.card2:hover .back { 
    transform: rotateY(0deg); 
}*/ 

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; backface-visibility: hidden; transition: 0.5s; 
} 
.face.front{ 
    background:#000; 
    transform: rotateY(0deg); 
} 
.face.back { 
    display: block; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    padding: 20px; 
    color: white; 
    text-align: left; 
    background-color: #333; 
} 
.card2 a.btn.btn-block{display:block;} 
.card2 a.btn.btn-outline{background:transparent;border:1px solid #fff;border-radius:3px;padding:10px;color:#fff;text-align:center;text-decoration:none;} 
.card2 a.btn.btn-outline:hover{background:#222;border:1px solid transparent;} 

$(document).ready(function() { 

$(".card2").click(function() { 
$('.face').toggleClass('front'); 
$('.face').toggleClass('back'); 

}); 

}); 

http://codepen.io/JohnDangerous/pen/ZpVqOQ

Answer 1

更新

.face.back { 
    text-align: left; 
} 

.face.back { 
    text-align: center; 
}