Skip to content

Instantly share code, notes, and snippets.

@maxw3st
Created July 16, 2013 00:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save maxw3st/6004660 to your computer and use it in GitHub Desktop.
body {perspective: 10000px;}
**
* 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;
}
<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>
// alert('Hello world!');
{"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