Question

I’m using some code from a tutorial to customize a card flip transition for a list of ‘cards’ that I’ll be presenting the user.

I’ve tried matching it to my design, but I’m having trouble with the div containers – I can’t figure out how to add padding without the flip axis moving away from the center of the card. I want it to flip in place, but every time I add in padding, it shifts the flip axis up a bit.

Where exactly can I add styling to my flip cards so that they still flip correctly?

<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.

Here’s the code for how I want it to look:

.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>

Here’s a screenshot of how I want to style the cards. It’s basically two nested divs – the outer div has a border of 5px and the inner div has a dashed border.

Answer 1

Add new class of .major-description to your css with a padding of 5px. Like this:

.major-description {
   padding: 5px;
}

Here’s the fiddle with the modification:
http://jsfiddle.net/KLqR3/1/