CSS动画侧具有空白

Question

我创建了一个网页，在该网页下，我正在使用CSS动画播放一种Cube旋转。Aniamtion运行良好，但它在立方体的侧面之间有空间，而彼此之间没有相遇。我试图将其设置为height＆amp;width相应地，但它有问题。

您可以在此处观看演示

CSS

.cube_container{width:1000px margin:0 auto;
    height:250px;
    margin-left:2%;
    position:relative;
    width: 1000px;
}
#area {
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    -ms-perspective: 10000px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    position:relative;
    float:left;
    top:10px;
    margin-left:inherit;
    height: 150px;
    width:150px;
}
#area2 {
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    -ms-perspective: 10000px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    position:relative;
    float:left;
    bottom:-10px;
    margin-left:100px;
    height: 150px;
    width:150px;
}
#cube {
    position:absolute;
    top:0px;
    left:0px;
    height:150px;
    width:150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 15000ms infinite ;
    -moz-animation: rotate-cube 15000ms infinite;
    -ms-animation: rotate-cube 15000ms infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
}
#cube2 {
    position:absolute;
    top:0px;
    left:0px;
    height:150px;
    width:150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 20000ms infinite ;
    -moz-animation: rotate-cube 20000ms infinite;
    -ms-animation: rotate-cube 20000ms infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
}
.side{
    height:150px;
    width:150px;
    border:5px rgba(215,215,215,1) solid;
    color:#000;
    line-height:150px;
    text-align:center;
    font-size:12px;
    font-family:"mv Boli";
    text-transform:capitalize;
    text-shadow:
        1px 0px #fff,
        0px 1px #fff,
        0px -1px #fff,
        -1px 0px #fff,
        -1px 1px #fff,
        -1px -1px #fff,
        1px 1px #fff;
    position:absolute;
    border-radius:10px;
    background:url(../images/bg.jpg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
}
.corners.left{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    position:absolute;
    top:0;
    left:0px;
    -webkit-transform:translateX(0px) ;
    -moz-transform:translateX(0px) ;
    -ms-transform:translateX(0px) ;
}
.corners.right{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    position:absolute;
    top:0;
    left:0px;
    -webkit-transform:translateX(150px) rotateY(180deg);
    -moz-transform:translateX(150px) rotateY(180deg);
    -ms-transform:translateX(150px) rotateY(180deg);
}
.cornerwrapper{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    position:absolute;
    top:0;
    left:0;
    height:70px;
    width:70px;
}
.cornerwrapper.ftl{
    -webkit-transform:rotateX(315deg) rotateZ(10deg) translateZ(-44px) translateY(-61px) translateX(-29px);
    -moz-transform:rotateX(315deg) rotateZ(10deg) translateZ(-44px) translateY(-61px) translateX(-29px);
    -ms-transform:rotateX(315deg) rotateZ(10deg) translateZ(-44px) translateY(-61px) translateX(-29px);
}
.cornerwrapper.fbl{
    -webkit-transform:rotateX(225deg) rotateZ(10deg) translateZ(-44px) translateY(-152px) translateX(-44px);
    -moz-transform:rotateX(225deg) rotateZ(10deg) translateZ(-44px) translateY(-152px) translateX(-44px);
    -ms-transform:rotateX(225deg) rotateZ(10deg) translateZ(-44px) translateY(-152px) translateX(-44px);
}
.cornerwrapper.btr{
    -webkit-transform:rotateX(45deg) rotateZ(10deg) translateZ(-136px) translateY(-61px) translateX(-29px);
    -moz-transform:rotateX(45deg) rotateZ(10deg) translateZ(-136px) translateY(-61px) translateX(-29px);
    -ms-transform:rotateX(45deg) rotateZ(10deg) translateZ(-136px) translateY(-61px) translateX(-29px);
}
.cornerwrapper.bbr{
    -webkit-transform:rotateX(135deg) rotateZ(10deg) translateZ(-136px) translateY(-152px) translateX(-44px);
    -moz-transform:rotateX(135deg) rotateZ(10deg) translateZ(-136px) translateY(-152px) translateX(-44px);
    -ms-transform:rotateX(135deg) rotateZ(10deg) translateZ(-136px) translateY(-152px) translateX(-44px);
}
 .corner1{
     background-color:transparent;
     height:0px;
     width:0px;
     border-left: 70px rgba(255,255,255,1) solid;
     border-top: 40px transparent solid;
     border-bottom: 40px transparent solid;
    -webkit-transform:translateZ(50px) translateX(-0px) rotateZ(0deg) rotateX(90deg) rotateY(-45deg) ;
    -moz-transform:translateZ(50px) translateX(-0px) rotateZ(0deg) rotateX(90deg) rotateY(-45deg) ;
    -ms-transform:translateZ(50px) translateX(-0px) rotateZ(0deg) rotateX(90deg) rotateY(-45deg) ;
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
}
.side.front2{
    -webkit-transform:rotateY(0deg) translateZ(100px);
    -moz-transform:rotateY(0deg) translateZ(100px);
    -ms-transform:rotateY(0deg) translateZ(100px);
    background:url(../cube%20images/24.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.front2{
    -webkit-transform:rotateY(0deg) translateZ(99.9px);
    -moz-transform:rotateY(0deg) translateZ(99.9px);
    -ms-transform:rotateY(0deg) translateZ(99.9px);
    z-index:0;
}
.side.back{
    -webkit-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    -moz-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    -ms-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    background:url(../cube%20images/1.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.back2{
    -webkit-transform:rotateY(180deg) translateZ(99.9px) ;
    -moz-transform:rotateY(180deg) translateZ(99.9px) ;
    -ms-transform:rotateY(180deg) translateZ(99.9px) ;
    z-index:0;
}
.side.bottom{
    -webkit-transform:rotateX(-90deg)  translateZ(100px);
    -moz-transform:rotateX(-90deg)  translateZ(100px);
    -ms-transform:rotateX(-90deg)  translateZ(100px);
   background:url(../cube%20images/2.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.bottom2{
    -webkit-transform:rotateX(-90deg)  translateZ(99.9px);
    -moz-transform:rotateX(-90deg)  translateZ(99.9px);
    -ms-transform:rotateX(-90deg)  translateZ(99.9px);
    z-index:0;
}
.side.top{
    -webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    -moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    -ms-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    background:url(../cube%20images/3.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.top2{
    -webkit-transform:rotateX(90deg)  translateZ(99.9px) ;
    -moz-transform:rotateX(90deg)  translateZ(99.9px) ;
    -ms-transform:rotateX(90deg)  translateZ(99.9px) ;
    z-index:0;
}
.side.right{
    -webkit-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    -moz-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    -ms-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    background:url(../cube%20images/4.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.right2{
    -webkit-transform:rotateY(90deg)  translateZ(99.9px) ;
    -moz-transform:rotateY(90deg)  translateZ(99.9px) ;
    -ms-transform:rotateY(90deg)  translateZ(99.9px) ;
    z-index:0;
}
.side.left2{
    -webkit-transform:rotateY(-90deg) translateZ(100px);
    -moz-transform:rotateY(-90deg) translateZ(100px);
    -ms-transform:rotateY(-90deg) translateZ(100px);
    background:url(../cube%20images/5.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.left2{
    -webkit-transform:rotateY(-90deg) translateZ(99.9px);
    -moz-transform:rotateY(-90deg) translateZ(99.9px);
    -ms-transform:rotateY(-90deg) translateZ(99.9px);
    z-index:0;
}

/*cube2 begins*/
.side.front3{
    -webkit-transform:rotateY(0deg) translateZ(100px);
    -moz-transform:rotateY(0deg) translateZ(100px);
    -ms-transform:rotateY(0deg) translateZ(100px);
    background:url(../cube%20images/6.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.front2{
    -webkit-transform:rotateY(0deg) translateZ(99.9px);
    -moz-transform:rotateY(0deg) translateZ(99.9px);
    -ms-transform:rotateY(0deg) translateZ(99.9px);
    z-index:0;
}
.side.back3{
    -webkit-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    -moz-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    -ms-transform:rotateY(180deg) rotateZ(-90deg) translateZ(100px) ;
    background:url(../cube%20images/7.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.back3{
    -webkit-transform:rotateY(180deg) translateZ(99.9px) ;
    -moz-transform:rotateY(180deg) translateZ(99.9px) ;
    -ms-transform:rotateY(180deg) translateZ(99.9px) ;
    z-index:0;
}
.side.bottom3{
    -webkit-transform:rotateX(-90deg)  translateZ(100px);
    -moz-transform:rotateX(-90deg)  translateZ(100px);
    -ms-transform:rotateX(-90deg)  translateZ(100px);
   background:url(../cube%20images/8.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.bottom3{
    -webkit-transform:rotateX(-90deg)  translateZ(99.9px);
    -moz-transform:rotateX(-90deg)  translateZ(99.9px);
    -ms-transform:rotateX(-90deg)  translateZ(99.9px);
    z-index:0;
}
.side.top3{
    -webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    -moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    -ms-transform:rotateX(90deg) rotateZ(90deg) translateZ(100px) ;
    background:url(../cube%20images/9.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.top3{
    -webkit-transform:rotateX(90deg)  translateZ(99.9px) ;
    -moz-transform:rotateX(90deg)  translateZ(99.9px) ;
    -ms-transform:rotateX(90deg)  translateZ(99.9px) ;
    z-index:0;
}
.side.right3{
    -webkit-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    -moz-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    -ms-transform:rotateY(90deg) rotateZ(-90deg)  translateZ(100px) ;
    background:url(../cube%20images/10.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.right3{
    -webkit-transform:rotateY(90deg)  translateZ(99.9px) ;
    -moz-transform:rotateY(90deg)  translateZ(99.9px) ;
    -ms-transform:rotateY(90deg)  translateZ(99.9px) ;
    z-index:0;
}
.side.left3{
    -webkit-transform:rotateY(-90deg) translateZ(100px);
    -moz-transform:rotateY(-90deg) translateZ(100px);
    -ms-transform:rotateY(-90deg) translateZ(100px);
    background:url(../cube%20images/11.jpg) no-repeat;
    z-index:1;
    border:5px rgba(180,179,179,1) solid;
    -webkit-backface-visibility:hidden;
}
.left3{
    -webkit-transform:rotateY(-90deg) translateZ(99.9px);
    -moz-transform:rotateY(-90deg) translateZ(99.9px);
    -ms-transform:rotateY(-90deg) translateZ(99.9px);
    z-index:0;
}
/*cube2 ends*/
@-webkit-keyframes rotate-cube {
    0%   {
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16.66%   {
    -webkit-transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    33.33%   {
    -webkit-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg);
    }
    50%   {
    -webkit-transform:rotateX(180deg) rotateY(0deg) rotateZ(90deg);
    }
    66.66%   {
    -webkit-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);
    }
    83.33%   {
    -webkit-transform:rotateX(180deg) rotateY(90deg) rotateZ(180deg);
    }
    100%   {
    -webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}
@-moz-keyframes rotate-cube {
    0%   {
    -moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16.66%   {
    -moz-transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    33.33%   {
    -moz-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg);
    }
    50%   {
    -moz-transform:rotateX(180deg) rotateY(0deg) rotateZ(90deg);
    }
    66.66%   {
    -moz-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);
    }
    83.33%   {
    -moz-transform:rotateX(180deg) rotateY(90deg) rotateZ(180deg);
    }
    100%   {
    -moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}
@-ms-keyframes rotate-cube {
    0%   {
    -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16.66%   {
    -ms-transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    33.33%   {
    -ms-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg);
    }
    50%   {
    -ms-transform:rotateX(180deg) rotateY(0deg) rotateZ(90deg);
    }
    66.66%   {
    -ms-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);
    }
    83.33%   {
    -ms-transform:rotateX(180deg) rotateY(90deg) rotateZ(180deg);
    }
    100%   {
    -ms-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

html

<div align="center" class="cube_container">
            <div align="center" id="area">
              <div align="center" id="cube">
                <div class="side front2"></div>
                <div class="side front2"></div>
                <div class="side back2"></div>
                <div class="side back"></div>
                <div class="side bottom2"></div>
                <div class="side bottom"></div>
                <div class="side top2"></div>
                <div class="side top"></div>
                <div class="side right2"></div>
                <div class="side right"></div>
                <div class="side left2"></div>
                <div class="side left2"></div>
                <div class="corners left">
                <div class="cornerwrapper ftl">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper btr">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper fbl">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper bbr">
                <div class="corner"></div>
                </div>
                </div>
                <div class="corners right">
                <div class="cornerwrapper ftl">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper btr">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper fbl">
                <div class="corner"></div>
                </div>
                <div class="cornerwrapper bbr">
                <div class="corner"></div>
                </div>
                </div>
                </div>
                </div>
            <div id="area2">
            <div id="cube2">
            <div class="side front3"></div>
            <div class="side front3"></div>
            <div class="side back3"></div>
            <div class="side back3"></div>
            <div class="side bottom3"></div>
            <div class="side bottom3"></div>
            <div class="side top3"></div>
            <div class="side top3"></div>
            <div class="side right3"></div>
            <div class="side right3"></div>
            <div class="side left3"></div>
            <div class="side left3"></div>
            <div class="corners left">
                <div class="cornerwrapper ftl"><div class="corner"></div></div>
                <div class="cornerwrapper btr"><div class="corner"></div></div>
                <div class="cornerwrapper fbl"><div class="corner"></div></div>
                <div class="cornerwrapper bbr"><div class="corner"></div></div>
            </div>
            <div class="corners right">
                <div class="cornerwrapper ftl"><div class="corner"></div></div>
                <div class="cornerwrapper btr"><div class="corner"></div></div>
                <div class="cornerwrapper fbl"><div class="corner"></div></div>
                <div class="cornerwrapper bbr"><div class="corner"></div></div>
            </div>
        </div>
    </div>

Answer 1

您所传递的transform值大于您需要的值。因此，translateZ将图像投射得太远。

尝试以下操作：

-webkit-transform: rotateY(180deg) translateZ(75px);

在每个地方，u translatez（100px）