flip using css3 и jquery

Question

Я пытаюсь создать флип-страницу с помощью jquery и css3. Я могу сделать это, если я поместил свои 2 страницы в 1 контейнер и затем повернул весь контейнер, но id хотел бы повернуть только мои страницы. Это мой код:

CSS:

#pagecontainer { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

.page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden;  
} 
.back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip.out { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 1.0s linear; 
    -o-transform-style: preserve-3d; 
    -o-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 

.flip.in { 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: all 1.0s linear; 
    -o-transform-style: preserve-3d; 
    -o-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 

Я затем добавить эти классы моих страниц в pagecontainer:

container.append(nextPage); 
nextPage.attr("class", "page back"); 
currentPage.one('webkitTransitionEnd', function(e) { 
    currentPage.remove(); 
}); 
nextPage.attr("class", "page back flip in"); 
container[0].offsetWidth; 
currentPage.attr("class", "page flip out"); 

Но только фронт листать? Что я делаю не так?

EDIT: Решено. Мне нужно было изменить порядок в моем сценарии, чтобы:

currentPage.attr("class", "page flip out"); <-- Start with this 
container[0].offsetWidth; 
nextPage.attr("class", "page back flip in"); <-- Finish with this 

Answer 1

Взгляните на этот плагин и его исходный код http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/ И помните, что даже поддержка оленья кожа IE10 сохранить-3d