Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

body {perspective: 10000px;}

View dabblet.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
answer via: @meyerweb. but doesn't work in IE9. the solution below will, but it's brute force and not DRY.
*/
/* body {perspective: 10000px;} */
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
list-style: none;
/*display: inline-block;*/
padding: 1em 1em 1em 2em;
border: 1px solid rgba(0,0,0,.3);
width: 1.5em;
border-radius: 0 999px 999px 0;
background: beige;
/*transform: rotateY(-1deg);*/
transform-origin: 0 100%;
transition: all .3s linear;
}
 
li:hover,
li:focus {
background: rgba(0,210, 240, .9);
border-right: 3px solid rgba(0,0,0, .3);
transform: rotateZ(9deg);
}
 
li:not(:last-child) {
margin-left: -1.6em;
padding-left: 2.5em;
}
 
#g {
position: relative;
left: 21em;
top: 1em;
}
 
#f {
position: relative;
left: 18em;
top: -2.4em;
}
 
#e {
position: relative;
left: 15em;
top: -5.75em;
}
 
#d {
position: relative;
left: 12em;
top: -9.1em;
}
 
#c {
position: relative;
left: 9em;
top: -12.5em;
}
 
 
#b {
position: relative;
left: 6em;
top: -15.9em;
}
 
#a {
position: relative;
left: 2em;
top: -19.25em;
}
View dabblet.css
1 2 3 4 5 6 7 8 9
<ul>
<li id="g">G</li>
<li id="f">F</li>
<li id="e">E</li>
<li id="d">D</li>
<li id="c">C</li>
<li id="b">B</li>
<li id="a">A</li>
</ul>
View dabblet.css
1
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.