css3 transforms to simulate a present opening

Question

Here my code : http://codepen.io/anon/pen/KVPJwB

/* Open Cube */
div#gift{
    margin-top: 0;
}
#origin {
    -webkit-perspective: 2500px;
    -webkit-perspective-origin: 50% 250px;
    perspective: 2500px;
    perspective-origin: 50% 250px;
    margin: 200px auto;
    width: 100%;
    float: left;
}
#origin #Ycube, #origin #Zcube {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#origin #cube {
    position: relative;
    margin: 0 auto;
    height: 613px;
    width: 604px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 100px 0;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}
#cube .one {
    -webkit-transform: rotateX(90deg) translateZ(200px);
    transform: rotateX(90deg) translateZ(200px);
}
#origin .face {
    position: absolute;
    height: 582px;
    width: 600px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    border: 1px #aaa solid;
}

#cube .two {
    -webkit-transform: translateZ(286px);
    transform: translateZ(286px);

    transition: all 1s ease-out;
}
#cube:hover .two{
    transform: translateX(0px) translateY(0px) translateZ(300px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 100%;
    background: red;
}
#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(300px);
    transform: rotateY(90deg) translateZ(300px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}

#cube:hover .three{
    /*transform: rotateY(90deg) translateZ(300px);*/
    transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    -webkit-transform-origin-x: 100%;
    -webkit-transform-origin-y: 100%;
}
#cube .four {
    -webkit-transform: rotateY(0deg) translateZ(-290px);
    -moz-transform: rotateY(0deg) translateZ(-290px);
    -ms-transform: rotateY(0deg) translateZ(-290px);
    transform: rotateY(0deg) translateZ(-290px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}
#cube:hover .four{
    transform: translateX(0px) translateY(0px) translateZ(-300px) rotateX(90deg) rotateY(-0deg) rotateZ(0deg);
    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 100%;
}
#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    transform: rotateY(-90deg) translateZ(300px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}

#cube:hover .five{
    /*transform: rotateY(-90deg) translateZ(300px);*/
    transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 100%;
}
#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(292px) rotate(180deg);
    transform: rotateX(-90deg) translateZ(292px) rotate(180deg);

    background-color: rgba(255, 0, 0, 0.5);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
    <link rel="stylesheet" href="codepen.css"/>
    <title>Calendar</title>
</head>
<body>
<section id="mainsection" role="main">
    <div id="origin">
        <div id="Zcube">
            <div id="Ycube">
                <div id="cube">
                    <div class="face two">
                    </div>
                    <div class="face three"></div>
                    <div class="face four"></div>
                    <div class="face five"></div>
                    <div class="face six"></div>
                </div>
            </div>
        </div>
    </div>

    <footer></footer>
</section>
</body>
</html>

My question: Opening the cube, why is each cube's face bottom side not attached to the base during the animation?

At the start and at the end it's ok but not during animation.

web-tiki · Accepted Answer

You can simply specify the transform-origin for the rotation with :

.face{transform-origin:50% 100%;}
.six{transform-origin:50% 50%;}

This way all 4 faces will rotate arount the bottom edge and stay attached to the bottom face :

/* Open Cube */
.face{transform-origin:50% 100%;}
.six{transform-origin:50% 50%;}
div#gift{
    margin-top: 0;
}
#origin {
    -webkit-perspective: 2500px;
    -webkit-perspective-origin: 50% 250px;
    perspective: 2500px;
    perspective-origin: 50% 250px;
    margin: 200px auto;
    width: 100%;
    float: left;
}
#origin #Ycube, #origin #Zcube {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#origin #cube {
    position: relative;
    margin: 0 auto;
    height: 613px;
    width: 604px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 100px 0;
    transform-style: preserve-3d;
    transform-origin: 0 0 0;
}
#cube .one {
    -webkit-transform: rotateX(90deg) translateZ(200px);
    transform: rotateX(90deg) translateZ(200px);
}
#origin .face {
    position: absolute;
    height: 582px;
    width: 600px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    border: 1px #aaa solid;
}

#cube .two {
    -webkit-transform: translateZ(286px);
    transform: translateZ(286px);

    transition: all 1s ease-out;
}
#cube:hover .two{
    transform: translateX(0px) translateY(0px) translateZ(300px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 100%;
    background: red;
}
#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(300px);
    transform: rotateY(90deg) translateZ(300px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}

#cube:hover .three{
    /*transform: rotateY(90deg) translateZ(300px);*/
    transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
    -webkit-transform-origin-x: 100%;
    -webkit-transform-origin-y: 100%;
}
#cube .four {
    -webkit-transform: rotateY(0deg) translateZ(-290px);
    -moz-transform: rotateY(0deg) translateZ(-290px);
    -ms-transform: rotateY(0deg) translateZ(-290px);
    transform: rotateY(0deg) translateZ(-290px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}
#cube:hover .four{
    transform: translateX(0px) translateY(0px) translateZ(-300px) rotateX(90deg) rotateY(-0deg) rotateZ(0deg);
    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 100%;
}
#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    transform: rotateY(-90deg) translateZ(300px);

    background-color: rgba(255, 0, 0, 0.5);
    transition: all 1s ease-out;
}

#cube:hover .five{
    /*transform: rotateY(-90deg) translateZ(300px);*/
    transform: translateX(0px) translateY(0px) translateZ(-306px) rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
    -webkit-transform-origin-x: 0%;
    -webkit-transform-origin-y: 100%;
}
#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(292px) rotate(180deg);
    transform: rotateX(-90deg) translateZ(292px) rotate(180deg);

    background-color: rgba(255, 0, 0, 0.5);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
    <link rel="stylesheet" href="codepen.css"/>
    <title>Calendar</title>
</head>
<body>
<section id="mainsection" role="main">
    <div id="origin">
        <div id="Zcube">
            <div id="Ycube">
                <div id="cube">
                    <div class="face two">
                    </div>
                    <div class="face three"></div>
                    <div class="face four"></div>
                    <div class="face five"></div>
                    <div class="face six"></div>
                </div>
            </div>
        </div>
    </div>

    <footer></footer>
</section>
</body>
</html>

css3 transforms to simulate a present opening

Tags:

css

css-transitions

Samaradona

1 Answers

web-tiki

Recent Activity

Donate For Us

css3 transforms to simulate a present opening

Tags:

css

css-transitions

Samaradona

1 Answers

web-tiki

Related questions

Recent Activity

Donate For Us