Flip pages for iOS

Flip pages for iOS using translate3d

by JordanBlount

HTML

<div id="a">a</div>
    <div id="b">b</div>

CSS

#wrapper {
    
}

div {
    width: 100%;
    height: 100%;
    float: left;
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform: translate3d(0%, 0, 0);
    position: absolute;
    top: 0;
}

#a {
    background: blue;
}

#b {
    background: red;
    left: 100%;
}

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
}

JavaScript

$$('div').addEvents({
    touchstart: function(){
        $$('div').setStyle('-webkit-transform', 'translate3d(-100%, 0, 0)');
    },
    
    click: function(){
        this.fireEvent('touchstart');
    }
});