CSS transitions solving the direction problem

My first attempt at CSS transitions is with a sliding panel system similar to iOS. All working but the panels are sliding out to the left and in from the left. I'm after an iOS style slider where as one panel slides out to the left the othe开发者_高级运维r in from the right, and if one goes back the opposite occurs.

#container{    
    position: relative;
    overflow: hidden;
    width: 250px;
}

.panel{
    position: absolute;    
    overflow: hidden;
    top: 0;
    left: 250px;
    width: 250px;
    max-height: 0;
    -webkit-transition: left .25s linear, max-height .25s linear;
    -moz-transition: left .25s linear, max-height .25s linear;
    -o-transition: left .25s linear, max-height .25s linear;
    transition: left .25s linear, max-height .25s linear;
    display:block;
}

.panel:target{
    left: 0px;
    max-height: 9999px;
    position: relative;
}

Any ideas,

Marvellous

Have a look at http://css3.bradshawenterprises.com/sliding/.

I'd make the various panels in a line, then slide between them as shown in the link above.