Create a gist now

Instantly share code, notes, and snippets.

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: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;
<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>
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment