Rotating CSS cube

Question

I want to create a CSS cube that has 4 sides (front, back, top, bottom) and it rotates up (or down) constantly only on X axis. But for some reason I can't align all the 4 sides so it looks like a cube. Here's my markup:

<div class="cube">
<div class="front">
    <h1>Front</h1>
</div>
<div class="bottom">
    <h2>Bottom</h2>
</div>
<div class="top">
    <h2>Top</h2>
</div>
<div class="back">
    <h2>Back</h2>
</div>

And my CSS:

body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}

.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;

-webkit-transform-style: preserve-3d;
-webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
}

.front {
-webkit-transform: translateZ(50px);
}

.bottom {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}

.top {
-webkit-transform: rotateX(90deg) translateZ(-50px);
}

.back {
-webkit-transform: rotateX(180deg) translateZ(-50px);
}

@-webkit-keyframes rotate-cube {
0%{-webkit-transform: rotateX(0deg);}
10%{-webkit-transform: rotateX(90deg);}
40%{-webkit-transform: rotateX(180deg);}
60%{-webkit-transform: rotateX(270deg);}
90%{-webkit-transform: rotateX(360deg);}
100{-webkit-transform: rotateX(360deg);}
}

Here's a JSFiddle. Don't mind the animation itself, I know it's not pretty, but it's still a work in progress. For now I only want to align all the 4 sides properly.

What did I do wrong and how can I align all the 4 sides?

Why not go search for a css 3D box? You are using a 3D'ish version anyways (I have seen that code before). Since you are using someone else's work just go find a full 3D box and use that. — Ruddy
– Ruddy, Commented Jan 19, 2015 at 9:33
jsfiddle.net/upyht8sb/6 You just got to transfrom before you rotate. It makes more sence that way. — Persijn
– Persijn, Commented Jan 19, 2015 at 9:54

pangoweb · Accepted Answer · 2015-01-19 09:38:54Z

2

Don't know if this is the best way to do it, but it seems adding position: absolute, (and a width), to the sides of the cube and then changing just the translation of "front":

.front {
    -webkit-transform: translateZ(-50px);
}

Seems to make it work (although texts are then displayed upside down). Didn't really checked the translate and rotate properties values themselves, so maybe setting position could be avoided, but it's what first came to my mind.

answered Jan 19, 2015 at 9:38

pangoweb

4841 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Igal Over a year ago

Thank you very much! For now I fixed the upside down text with rotateY(180deg) scale(-1, -1) - jsfiddle.net/upyht8sb/8

Victor Radu · Accepted Answer · 2015-01-19 10:30:14Z

Here is one solution, you need to position them absolute first to make sure you have one clear start position:

 body {
    color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
    background: #F4F6F8;
    padding: 3em 0 0 0;
    line-height: 62px;
    -webkit-perspective: 1000px;
}

.cube {
    width: 30%;
    text-align: center;
    margin: 0 auto;
    height: 100px;

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    height: 100px;
    position: absolute;
    width: 100%;
}

.front {
    -webkit-transform: translateZ(50px);
}

.bottom {
    -webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.top {
    -webkit-transform: rotateX(-90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.back {
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

@-webkit-keyframes rotate-cube {
    0%{-webkit-transform: rotateX(0deg);}
    10%{-webkit-transform: rotateX(90deg);}
    40%{-webkit-transform: rotateX(180deg);}
    60%{-webkit-transform: rotateX(270deg);}
    90%{-webkit-transform: rotateX(360deg);}
    100{-webkit-transform: rotateX(360deg);}
}

see fiddle:# http://jsfiddle.net/upyht8sb/7/

eliteware · Accepted Answer · 2015-01-19 10:24:48Z

Use this code and remove the parts you don't need from the HTMl. Didn't know which ones you wanted removed so i made the whole thing.

HTML

<div id="container">
  <div class="step">
    <div class="front"></div>
    <div class="right"></div>  
    <div class="left"></div>            
    <div class="back"></div>            
    <div class="top"></div>
    <div class="bottom"></div>
  </div>

CSS

#container{
width:100%;
margin-top:100px;
-webkit-perspective : 1000px;
-webkit-perspective-origin  : 25% -15%;
-moz-perspective : 1000px;
-moz-perspective-origin  : 25% -15%;
}

.step{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
-webkit-transform-style : preserve-3d;
-webkit-animation:rotate 5s infinite linear;
-moz-transform-style : preserve-3d;
-moz-animation:rotate 5s infinite linear;
transform-style : preserve-3d;
animation:rotate 5s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@-moz-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
.step>div {
position: absolute;
opacity: 1;
}
.front{
width:200px;
height:200px;
background:#000;
-webkit-transform: rotateY(0deg) translateZ(0px);
}
.right{
width:200px;
height:200px;
background:#222;
-webkit-transform: rotateY(90deg) translateZ(100px) translateY(0) translateX(100px);
}
.left{
width:200px;
height:200px;
background:#444;
-webkit-transform: rotateY(90deg) translateZ(-100px) translateY(0) translateX(100px);
}
.back{
width:200px;
height:200px;
background:#666;
-webkit-transform: rotateY(0deg) translateZ(-200px) translateY(0) translateX(0px);
}
.top{
width:200px;
height:200px;
background:#888;
-webkit-transform: rotateX(90deg) translateZ(100px) translateY(-100px) translateX(0px);
}
.bottom{
width:200px;
height:200px;
background:#aaa;
-webkit-transform: rotateX(90deg) translateZ(-100px) translateY(-100px) translateX(0px);
}

And here's a fiddle http://jsfiddle.net/bwpuab64/2/

Collectives™ on Stack Overflow

Rotating CSS cube

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related