Combining -webkit-overflow-scroling: touch; and -webkit-transform: rotateY;

Tap or click on the list to flip it. Both lists should scroll. On iOS 5 only the Back-list scrolls, even if the Front-list is faced to the front.

by Caleb Wong

HTML

<div id="front" onclick="flip();">
    <p>Name <input type="text" /></p>
    <p>Email <input type="email" /></p>
    <p><button>Submit</button></p>
</div>
<div id="back" class="flipped" onclick="flip();">
<p>Sirloin turducken t-bone filet mignon tail. Sirloin andouille shoulder, bacon turducken capicola tri-tip beef ribs t-bone sausage jerky ball tip hamburger. Shank hamburger turducken ribeye, short ribs boudin cow kielbasa strip steak tail drumstick turkey tenderloin t-bone. Pastrami ground round pork chop t-bone chicken, turducken short ribs shank hamburger sausage shoulder flank turkey meatloaf. Corned beef cow fatback andouille, pork chop turkey hamburger. Pork chop bresaola pork loin, flank pork ham hock meatball swine pastrami capicola jowl chuck spare ribs drumstick. Fatback pig biltong, venison pork rump chuck cow tail strip steak tenderloin beef ribs.</p>
<p>Sirloin turducken t-bone filet mignon tail. Sirloin andouille shoulder, bacon turducken capicola tri-tip beef ribs t-bone sausage jerky ball tip hamburger. Shank hamburger turducken ribeye, short ribs boudin cow kielbasa strip steak tail drumstick turkey tenderloin t-bone. Pastrami ground round pork chop t-bone chicken, turducken short ribs shank hamburger sausage shoulder flank turkey meatloaf. Corned beef cow fatback andouille, pork chop turkey hamburger. Pork chop bresaola pork loin, flank pork ham hock meatball swine pastrami capicola jowl chuck spare ribs drumstick. Fatback pig biltong, venison pork rump chuck cow tail strip steak tenderloin beef ribs.</p>
<p>Sirloin turducken t-bone filet mignon tail. Sirloin andouille shoulder, bacon turducken capicola tri-tip beef ribs t-bone sausage jerky ball tip hamburger. Shank hamburger turducken ribeye, short ribs boudin cow kielbasa strip steak tail drumstick turkey tenderloin t-bone. Pastrami ground round pork chop t-bone chicken, turducken short ribs shank hamburger sausage shoulder flank turkey meatloaf. Corned beef cow fatback andouille, pork chop...

CSS

#front, #back {
 position: absolute;
 width: 400px;
 height: 400px;
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
 -webkit-backface-visibility: hidden;
 -webkit-transition: all 1s ease-in-out;
}

#front {
 background: green;
}

#back {
 background: red;
}
#back p {
    margin: 0 20px 20px; 
}

#front.flipped {
-webkit-transform: perspective(1000px) rotateY(180deg);
}

#back.flipped {
-webkit-transform: perspective(1000px) rotateY(-180deg);
}

JavaScript

function flip() {
    var front = document.getElementById("front");
    var back = document.getElementById("back");
    if (front.className != "flipped") {
        front.className = "flipped";
        back.className = "";
    } else {
        front.className = "";
        back.className = "flipped";
    }
}