我正在使用教程中的一些代码为我将向用户展示的“卡片”列表自定义卡片翻转过渡。
我已经尝试将它与我的设计相匹配，但是我在使用 div 容器时遇到了问题——我无法弄清楚如何在不使翻转轴远离卡片中心的情况下添加填充。我希望它翻转到位，但每次我添加填充时，它都会将翻转轴向上移动一点。
我究竟可以在哪里为我的翻转卡添加样式，以便它们仍然可以正确翻转？
<div class="flip">
<div class="card">
<div class="face front">
<div class="padding">
<table class="majorTable">
<tr>
<td width="6%" class="list-number">2.</td>
<td width="79%" class="major">Brain and Behavioral Sciences</td>
<td width="15%" rowspan="2" align="right"><div id="charts2" style="height:110px; width:110px;display:inline-block;"></div></td>
</tr>
<tr>
<td width="5%" class="list-number"></td>
<td width="95%" class="major-description align-top">The term behavioural sciences encompasses all the disciplines that explore the activities of and interactions among organisms in the natural world. It involves the systematic analysis and...</td>
</tr>
</table>
</div>
</div>
<div class="face back">
<div class="padding">
<table class="majorTable">
<tr>
<td width="100%" class="major-description align-top">Computer science or computing science (abbreviated CS or CompSci) designates the scientific and mathematical approach in computing. A computer scientist is a scientist who specialises in the theory of computation and the design of computers. Its subfields can be divided into practical techniques for its implementation and application in computer systems and purely theoretical areas.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 80%;
height: 130px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.3s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
box-shadow:0px 0px 20px #555;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
$('.flip').click(function(){
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
这是我希望它看起来如何的代码：
.majorTable {
width:100%;
}
.list-number {
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
font-weight:bold;
}
.major {
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
font-weight:bold;
}
.major-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
line-height:2em;
color:#555;
}
.cardButton {
background:#F6F6F6;
padding:10px;
border:1px dashed #AAA;
}
.cardBorder {
margin:15px 0 15px 0;
border: 5px solid #F6F6F6;
}
<div class="cardBorder">
<div class="cardButton">
<table class="majorTable">
<tr>
<td width="6%" class="list-number">1.</td>
<td width="79%" class="major">Computer Science</td>
<td width="15%" rowspan="2" align="right"><div id="charts1" style="height:110px; width:110px;display:inline-block;"></div></td>
</tr>
<tr>
<td width="6%" class="list-number"></td>
<td width="79%" class="major-description align-top">Computer science or computing science (abbreviated CS or CompSci) designates the scientific and mathematical approach in computing. A computer scientist is a scientist who specialises in the theory...</td>
</tr>
</table>
</div>
</div>
这是我要如何设置卡片样式的屏幕截图。它基本上是两个嵌套的 div - 外部 div 的边框为 5px，内部 div 的边框为虚线。