CSS3 Prism動畫故障

我正在研究一個關於CSS3的實驗項目，在-webkit-瀏覽器中使用3D動畫，除了我的三棱鏡的最終位置以外，所有的事情都能正常工作。
here是代碼的小提琴。
日曆視圖端口最適合動畫後的紅色邊框。CSS3 Prism動畫故障

這個ID我的CSS是genrates動畫：

.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-瀏覽器可以看到！

來源

2013-07-28 Homam

有兩件事情你應該考慮：

的「.flipbox容器.flipwrap」類的變換起源應該是‘中心中心’
您還改變translateZ財產在動畫中。當translateZ屬性爲< = -57時，棱鏡僅保留在紅色框內。 f1類具有57px的translateZ屬性，不會留在紅色框內。

來源

2013-07-28 13:42:14 Alex

正確的CSS應該是：

/*calendar*/ 
.date-box { 
    width: 200px; 
    height: 90px; 
    background: gray; 
    margin: 0 auto; 
} 
.date-box>div { 
    width: 100px; 
    text-align: center; 
} 
.date-box>.left { 
    float: left; 
    height: 30px; 
    line-height: 30px; 
} 
.date-box>.right { 
    float: right; 
    height: 90px; 
    line-height: 90px; 
} 
.date { 
    font-size: 5em; 
    font-weight: bold; 
} 
/*rotative*/ 
.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: center 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(-57px) rotateY(-240deg); 
}

updated fiddle

來源

2013-07-28 21:01:50 vals

CSS3 Prism動畫故障

回答

相關問題