这是我的代码:http: //codepen.io/anon/pen/KVPJwB
/* Open Cube */
div#gift{
margin-top: 0;
}
#origin {
-webkit-perspective: 2500px;
-webkit-perspective-origin: 50% 250px;
perspective: 2500px;
perspective-origin: 50% 250px;
margin: 200px auto;
width: 100%;
float: left;
}
#origin #Ycube, #origin #Zcube {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#origin #cube {
position: relative;
margin: 0 auto;
height: 613px;
width: 604px;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 100px 0;
transform-style: preserve-3d;
transform-origin: 0 0 0;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#origin .face {
position: absolute;
height: 582px;
width: 600px;
-webkit-backface-visibility: visible;
backface-visibility: visible;
border: 1px #aaa solid;
}
#cube .two {
-webkit-transform: translateZ(286px);
transform: translateZ(286px);
transition: all 1s ease-out;
}
#cube:hover .two{
transform: translateX(0px) translateY(0px) translateZ(300px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform-origin-x: 0;
-webkit-transform-origin-y: 100%;
background: red;
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(300px);
transform: rotateY(90deg) translateZ(300px);
background-color: rgba(255, 0, 0, 0.5);
transition: all 1s ease-out;
}
#cube:hover .three{
/*transform: rotateY(90deg) translateZ(300px);*/
transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
-webkit-transform-origin-x: 100%;
-webkit-transform-origin-y: 100%;
}
#cube .four {
-webkit-transform: rotateY(0deg) translateZ(-290px);
-moz-transform: rotateY(0deg) translateZ(-290px);
-ms-transform: rotateY(0deg) translateZ(-290px);
transform: rotateY(0deg) translateZ(-290px);
background-color: rgba(255, 0, 0, 0.5);
transition: all 1s ease-out;
}
#cube:hover .four{
transform: translateX(0px) translateY(0px) translateZ(-300px) rotateX(90deg) rotateY(-0deg) rotateZ(0deg);
-webkit-transform-origin-x: 0%;
-webkit-transform-origin-y: 100%;
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(300px);
transform: rotateY(-90deg) translateZ(300px);
background-color: rgba(255, 0, 0, 0.5);
transition: all 1s ease-out;
}
#cube:hover .five{
/*transform: rotateY(-90deg) translateZ(300px);*/
transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
-webkit-transform-origin-x: 0%;
-webkit-transform-origin-y: 100%;
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(292px) rotate(180deg);
transform: rotateX(-90deg) translateZ(292px) rotate(180deg);
background-color: rgba(255, 0, 0, 0.5);
}
Calendar
我的问题:打开立方体,为什么在动画过程中每个立方体的底面都没有连接到底座？
在开始和结束时它是好的但不是在动画期间.
京公网安备 11010802040832号 | 京ICP备19059560号-6 