1

jquery と css3 を使用してフリップ ページを作成しようとしています。2 つのページを 1 つのコンテナーに入れてからコンテナー全体を回転させると、それを行うことができますが、ページのみを回転させたいと思います。これは私のコードです：

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");

でも前だけ弾いてる？私は何を間違っていますか？

編集： 解決しました。スクリプトの順序を次のように変更する必要がありました。

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

1 に答える 1

0

このプラグインと彼のソース コードを見てみましょうhttp://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/ IE10 でさえ preserve-3d をサポートしていないことを覚えておいてください

于 2013-07-07T11:21:36.567 に答える