单击时CSS卡翻转中的文本向左跳

Question

我正在处理这个 CSS 卡片翻转。我让它在悬停时完美运行。我添加了一些 jquery 以允许单击时翻转，但现在我在卡片内放置的任何内容都会在卡片翻转之前向左向右移动。不知道我能做些什么来解决它。我已经尝试了很多东西，但我不确定是什么原因造成的。我正在附上一个密码笔。

对不起，我的代码在下面的草率粘贴。所以强迫你用你的笔发布代码。看笔更容易看。

这是我的代码，后面是笔：

<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;
}