0

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

这个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- 浏览器中看到！

4

2 回答 2

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

更新的小提琴

于 2013-07-28T21:01:50.430 回答
0

您应该考虑两件事：

  • “.flipbox-container .flipwrap”类的变换原点应该是“中心中心”
  • 您还在动画期间更改 translateZ 属性。当 translateZ 属性 <=-57 时，棱镜仅停留在红色框内。f1 类的 translateZ 属性为 57px，不会停留在红色框内。
于 2013-07-28T13:42:14.997 回答