CSS3棱镜动画故障

Question

我正在CSS3上做一个实验项目，在-webkit浏览器中制作3D动画，除了最后放置我的三面棱镜外，一切都很好
这是密码的小提琴
日历视图端口最适合动画后的红色边框。

这是生成动画的我的css：

.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浏览器中看到

Answer 1

正确的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);
}

更新的fiddle

Answer 2

您应该考虑两件事：

• ".fflipbox-container.flipwrap"类的转换原点应为"圆心"
• 您还在动画过程中更改translateZ特性。当translateZ属性为<-57.f1类的translateZ属性为57px，不会停留在红色框内