小贝子编程

css3转换以模拟当前的打开



这里是我的代码：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>

我的问题是：打开立方体，为什么在动画过程中每个立方体的面部底面都没有附着到底部？

在开始和结束时都可以，但在动画过程中不行。

您可以简单地指定旋转的变换原点：

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

这样，所有4个面都将围绕底部边缘旋转，并与底部面保持连接：

/* 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>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium