我正在使用这张CSS卡翻转。我把它完美地悬停在上面。我添加了一些jquery以允许点击翻转,但现在我在卡片内部放置的任何内容都会在卡片翻转之前向左移动。不知道我能做些什么来解决它。我尝试了很多东西,但我不确定是什么导致它。我附加了一个codepen。
抱歉我的代码下面的草率粘贴。 SO迫使你用笔发布代码。看笔比较容易看。
这是我的代码,后面是一支笔:
<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 ›</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');
});
});
答案 0 :(得分:2)
更新
.face.back {
text-align: left;
}
到
.face.back {
text-align: center;
}