Databases
StackOverflow2013
Postsdbo
POCSS3 Card Flip Padding
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 Card Flip Padding
    primarykey
    data
    text
    <p>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.</p> <p>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.</p> <p>Where exactly can I add styling to my flip cards so that they still flip correctly?</p> <pre><code>&lt;div class="flip"&gt; &lt;div class="card"&gt; &lt;div class="face front"&gt; &lt;div class="padding"&gt; &lt;table class="majorTable"&gt; &lt;tr&gt; &lt;td width="6%" class="list-number"&gt;2.&lt;/td&gt; &lt;td width="79%" class="major"&gt;Brain and Behavioral Sciences&lt;/td&gt; &lt;td width="15%" rowspan="2" align="right"&gt;&lt;div id="charts2" style="height:110px; width:110px;display:inline-block;"&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="5%" class="list-number"&gt;&lt;/td&gt; &lt;td width="95%" class="major-description align-top"&gt;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...&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="face back"&gt; &lt;div class="padding"&gt; &lt;table class="majorTable"&gt; &lt;tr&gt; &lt;td width="100%" class="major-description align-top"&gt;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.&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <hr> <pre><code>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; } </code></pre> <hr> <pre><code>$('.flip').click(function(){ $(this).find('.card').addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; });​ </code></pre> <p><a href="http://jsfiddle.net/KLqR3/" rel="nofollow noreferrer"><strong>Here's a Fiddle with what I have now.</strong></a></p> <p>Here's the code for how I want it to look:</p> <pre><code>.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; } </code></pre> <hr> <pre><code> &lt;div class="cardBorder"&gt; &lt;div class="cardButton"&gt; &lt;table class="majorTable"&gt; &lt;tr&gt; &lt;td width="6%" class="list-number"&gt;1.&lt;/td&gt; &lt;td width="79%" class="major"&gt;Computer Science&lt;/td&gt; &lt;td width="15%" rowspan="2" align="right"&gt;&lt;div id="charts1" style="height:110px; width:110px;display:inline-block;"&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="6%" class="list-number"&gt;&lt;/td&gt; &lt;td width="79%" class="major-description align-top"&gt;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...&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><img src="https://i.stack.imgur.com/PLt4C.png" alt=""> 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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJon
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload