0

私は CSS3 の実験的なプロジェクト、-webkit- ブラウザーでの 3D アニメーションに取り組んでいます。私の 3 面プリズムの最終的な配置を除いて、すべてが正常に動作します。
これがコードのフィドルです。
カレンダー ビュー ポートは、アニメーションの後、赤い枠に最も収まります。

これは、アニメーションを生成する私の css の ID です。 

.flipbox-container {
    -webkit-perspective: 400px;
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 90px;
    border: 1px solid red;
}
.flipbox-container .flipwrap {
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -webkit-transition: -webkit-transform 1s;
    -webkit-transform: translateZ(-57px) rotateY(0deg);
    position: absolute;
    width: 200px;
    height: 90px;
}
.flipbox-container .date-box {
    -webkit-backface-visibility: visible;
    display: block;
    position: absolute;
    width: 200px;
    height: 90px;
}
.flipbox-container .date-box:first-child {
    background: #ccc;
    -webkit-transform: rotateY(0deg) translateZ(57px);
}
.flipbox-container .date-box:nth-child(2) {
    background: #eee;
    -webkit-transform: rotateY(120deg) translateZ(57px);
}
.flipbox-container .date-box:last-child {
    background: #aaa;
    -webkit-transform: rotateY(240deg) translateZ(57px);
}
.flipbox-container .flipwrap.f1 {
    -webkit-transform: translateZ(57px) rotateY(-120deg);
}
.flipbox-container .flipwrap.f2 {
    -webkit-transform: translateZ(-133px) rotateY(-240deg);

-webkit- ブラウザで表示する必要があることに注意してください。

4

2 に答える 2

0

考慮すべき点が 2 つあります。

  • 「.flipbox-container .flipwrap」クラスの変換元は「center center」にする必要があります
  • アニメーション中に translateZ プロパティも変更しています。translateZ プロパティが <=-57 の場合、プリズムは赤いボックス内にのみ留まります。f1 クラスには 57px の translateZ プロパティがあり、赤いボックス内にとどまりません。
于 2013-07-28T13:42:14.997 に答える