CSS3棱镜动画故障
CSS3棱镜动画故障
提问于 2013-07-28 11:38:59
我正在做一个关于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浏览器！中。
回答 2
Stack Overflow用户
发布于 2013-07-28 21:01:50
正确的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);
}更新小提琴
Stack Overflow用户
发布于 2013-07-28 13:42:14
有两件事你应该考虑：
- “..flipbox容器.flipwrap”类的转换原点应该是“中心”
- 您还将在动画期间更改translateZ属性。当translateZ属性<=-57时，棱镜只停留在红色框内。f1类的translateZ属性为57 box，不会停留在红色框中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17907796
复制相关文章
相似问题
腾讯云开发者
