CSS3 Prism 动画故障答案

【问题标题】：CSS3 Prism animation malfunctionCSS3 Prism 动画故障
【发布时间】：2013-07-28 06:49:27
【问题描述】：

我正在做一个关于 CSS3 的实验项目，在 -webkit- 浏览器中制作 3D 动画，除了我的 3 面棱镜的最终放置之外，所有的东西都工作正常。
here 是代码的小提琴。
动画后最适合红色边框的日历视图端口。

这个id是我生成动画的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- 浏览器中看到！

【问题讨论】：

标签： html css transform css-transitions

【解决方案1】：

您应该考虑两件事：

“.flipbox-container .flipwrap”类的变换原点应为“center center”
您还在动画期间更改 translateZ 属性。当 translateZ 属性

【讨论】：

【解决方案2】：

正确的 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

【讨论】：