Animated cube-like (only two faces) effect with CSS3

微信扫一扫,分享到朋友圈

Animated cube-like (only two faces) effect with CSS3

I would like to reproduce this jsfiddle I that prepared based on this awesome tutorial
(please check the demo
). But I don’t want the keys functionality, just on hover.

http://jsfiddle.net/b5rmW/5/

But that only uses 2 faces (front and back).

I tried, like this:

#cube {
      position: relative;
      margin: 100px auto 0;
      height: 300px;
      width: 300px;
      -webkit-transition: -webkit-transform .5s linear;
      -webkit-transform-style: preserve-3d;

      -moz-transition: -moz-transform .5s linear;
      -moz-transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 300px;
      width: 300px;
      padding: 0px;
      background-color: rgba(50, 50, 50, 1);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }

    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(150px);
      -moz-transform: rotateX(90deg) translateZ(150px);
      background:red;
    }

    #cube .two {
      -webkit-transform: translateZ(150px);
      -moz-transform: translateZ(150px);
    background:gold;
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(150px);
      -moz-transform: rotateY(90deg) translateZ(150px);
    background:blue;
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(150px);
      -moz-transform: rotateY(180deg) translateZ(150px);
    background:green;
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(150px);
      -moz-transform: rotateY(-90deg) translateZ(150px);
    background:orange;
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
    }
#cube:hover{
   transform:rotateY(90deg); 

}

http://jsfiddle.net/5XTeU/1/

But the effect seems not to be the same.

What do you think is the minimum divs needed to achieve this first fiddle??

Thanks.

Problem courtesy of: Toni Michel Caubet

Solution

Update:So a slight misunderstanding on which faces need to exist… so this update is for a front
and side
face rotation.

However, in the original answer below, points 1) and 2) are still valid problems with the code. Points 3) and 4) no longer apply since they were concerned with the back
face. The remaining CSS rules can be removed. You could also pull in the perspective
wrapper to give the cube a “less flat” look – see
updated demo

.

HTML

front face
side face

CSS

#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
}

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;

    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color:red;
}

.cube .side {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    background-color:orange;
}

.cube:hover{
    -webkit-transform:rotateY(90deg);     
}

Original Answer

There are 4 problems with the demo code, so let’s look at them individually and see what the solution to each one is:

1) the HTML has a typo on class for the front
face – it is missing an r


instead of

2) For Webkit browsers you need to use the prefixed property for transform

-webkit-transform:rotateY(90deg);
instead of transform:rotateY(90deg);

3) The back
face you have chosen is the wrong face. You have repurposed the left
face by accident. The front
face is correct, which is a


translated 150px
outwards. So the corresponding back
face should be the one translated -150px
inwards. However, if we just do that, the position would be correct but when rotated around the centre of the cube the back face would end up backwards. So the correct back
face is the one that is initially rotated by 180° around the Y
axis. However, by rotating around the Y
axis the translation along Z
still needs to be +150px
and not -150px
.

.cube .back{
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
   background:orange;
}

4) The rotation to get the back
face into the position where the front
starts should be a rotation of 180° and not 90°

.cube:hover{
    -webkit-transform:rotateY(180deg);
}

Putting all those changes together gives
this demo

.

HTML

front face
back face

CSS

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color: red;
}

.cube .back {
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    background:orange;
}

.cube:hover{
    -webkit-transform:rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform:rotateY(180deg);
}

Solution courtesy of: andyb

微信扫一扫,分享到朋友圈

Animated cube-like (only two faces) effect with CSS3

Julie and Dave talk about the iPhone Xs Max

上一篇

Google My Business Changes Post Limit to 1,500 Characters by @MattGSouthern

下一篇

你也可能喜欢

Animated cube-like (only two faces) effect with CSS3

长按储存图像,分享给朋友