Animated cube-like effect (two faces only) with CSS3
I would like to reproduce this jsfiddle I prepared based on this awesome tutorial (please check the demo ). But I don't want the functionality of the keys, only on hover.
But this 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);
}
But the effect does not seem to be the same.
What do you think are the minimum divs needed to achieve this first fiddle?
Thank.
source to share
Update: So, a little misunderstanding about which entities should exist & hellip; so this update is for front and side rotation.
However, in the original answer below, items 1) and 2) remain relevant code issues. Points 3) and 4) no longer apply as they relate to the rear face. The rest of the CSS rules can be removed. You could also drag into a perspective shell to give the cube a "less flat" look - see updated demo .
Html
<div id="experiment">
<div class="cube">
<div class="face front">
front face
</div>
<div class="face side">
side face
</div>
</div>
</div>
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 take a look at them individually and see what the solution is for each of them:
1) HTML has a typo on the class for the facet - missing r
<div class="face font">
instead <div class="face front">
2) For Webkit browsers you need to use the prefixed property for transform
-webkit-transform:rotateY(90deg);
instead transform:rotateY(90deg);
3) The back face you selected is the wrong face. You accidentally deleted the left face. The front face is correct, which is <div>
translated 150px
outward. Thus, the corresponding reverse side must be turned -150px
inward. However, if we just do this, the position is correct, but when it rotates around the center of the cube, the back side will go back in the opposite direction. Thus, the correct back side is the one that was initially rotated 180 degrees; around the axis Y
. However, by rotating around the axis Y
, translation along Z
should still be +150px
, not -150px
.
.cube .back{
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:orange;
}
4) Rotation to get the back face to the position where the front starts, there must be a 180 ° rotation; and not 90 °
.cube:hover{
-webkit-transform:rotateY(180deg);
}
Including all these changes gives this demo .
Html
<div class="cube">
<div class="face front">
front face
</div>
<div class="face back">
back face
</div>
</div>
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);
}
source to share