user3197977
Reputation:
css animation sides having blank spaces between
I have created a webpage under which i am playing kind of cube rotations using the css animation. Aniamtion is working fine but it is having the space between the sides of cube which does not meet each other. I tried to set it height & width accordingly but it is having the problem..
You can watch the demo here
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>
Upvotes: 0
Views: 356
Answers (1)
periback2
Reputation: 1469
the transform value you are passing is bigger than what you need. so the translateZ is projecting the image too far from the cube interface.. this is why we have the impression the cube is not correct...
try this:
-webkit-transform: rotateY(180deg) translateZ(75px);
in every place u had translateZ(100px)
Upvotes: 3
Related Questions
- css3 animation margin auto not working
- CSS fill animation breaks on white space
- css animation white-space: nowrap;
- Unexpected effect of padding on width animation
- Why during animation between two 'div' there is an empty space?
- Unwanted whitespace created by CSS transition animation
- Animation offset
- Facing Issues with CSS Animation
- CSS3 Animation | Simple issue
- CSS3 Animation issue