0

チュートリアルのコードを使用して、ユーザーに提示する「カード」のリストのカード フリップ トランジションをカスタマイズしています。

デザインに合わせようとしましたが、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>

これは、カードのスタイルを設定する方法のスクリーンショットです。基本的には 2 つのネストされた div です。外側の div には 5px の境界線があり、内側の div には破線の境界線があります。

4

1 に答える 1

0

css に .major-description の新しいクラスを 5px のパディングで追加します。このような：

.major-description {
   padding: 5px;
}

変更のフィドルは次のとおりです。 http://jsfiddle.net/KLqR3/1/

于 2012-10-19T15:29:00.177 に答える