Databases
StackOverflow2013
Postsdbo
POCSS Flipping Cube
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Flipping Cube
    primarykey
    data
    text
    <p>I made some expriment with CSS3. I wanted to build a Flipping Cube with only 2 DIV.Like this: <a href="http://cssdeck.com/labs/css3-flipping-cube" rel="nofollow">http://cssdeck.com/labs/css3-flipping-cube</a> (I dont like this solution because the div must always be centered) So I have tried to find my own solution. My HTML structure looks like this:</p> <pre><code>&lt;div class="outer"&gt; &lt;div class="face face1"&gt;Click here !&lt;/div&gt; &lt;div class="face face2"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>My CSS file looks like this:</p> <pre><code>.outer { margin-left:52px; position:relative; width:400px; perspective:500px; } .face { width:100%; height:50px; padding:0 10px; background-color:#E5E5E5; position:absolute; } .face.face1 { height:50px; background-color:#E5E5E5; transform:rotateX(0deg); transform-origin:0 0 0; z-index:1; top:0; } .face.face2 { height:50px; background-color:#007CC1; transform:rotateX(-90deg); transform-origin:0 50px 0; z-index:3; top:0; } .face.face1.start { transform:rotateX(90deg); transition:transform 1s ease-out; } .face.face2.start { transform:rotateX(0deg); transition:transform 1s ease-out; } </code></pre> <p>When I click on the <code>face1</code> then javascript adds the class start to the divs for are the animation.</p> <pre><code>$(function(){ $('.outer').on('click', function(){ $('.face1').addClass('start'); $('.face2').addClass('start'); }); }); </code></pre> <p>My solution looks currently not good. Do you have any tips or idea for me. You can see the whole code here:</p> <p><a href="http://jsfiddle.net/dAXRX/3/" rel="nofollow">http://jsfiddle.net/dAXRX/3/</a></p> <p>(I didn't use the <code>-webkit</code> prefix. It currently only works with Firefox)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmal200
    1. USmal200
    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. This table or related slice is empty.
    1. VO
      singulars
      1. POCSS Flipping Cube
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS Flipping Cube
      1. USAlix Axel
      1. VTFavorite
    1. COWhat don't you like about your solution? Too slow? Also, I can't readily see what you mean about that other solution being centered.
      singulars
      1. POCSS Flipping Cube
      1. USThinkingStiff
    2. COthat doesn't look like a qube
      singulars
      1. POCSS Flipping Cube
      1. USmal200
    3. COI think the problem is that the sides of the blue rectangle need to start skewed and and transform as it rotates to keep its shape. You might start by looking at the trapezium and parallelogram at http://www.cssportal.com/css3-shapes/
      singulars
      1. POCSS Flipping Cube
      1. UStehaaron
 

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