Question

我正在使用教程中的一些代码为我将向用户呈现的“卡片”列表自定义卡片翻转过渡。

我已经尝试将它与我的设计相匹配，但我遇到了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;
});

Here's a Fiddle with what I have now.

以下是我希望它看起来的代码：

.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有一个虚线边框。

Answer 1

将新的.major-description类添加到您的css中，填充为5px。像这样：

.major-description {
   padding: 5px;
}

以下是修改的小提琴： http://jsfiddle.net/KLqR3/1/

CSS3卡翻转填充

1 个答案: