5
Hier zu simulieren: http://codepen.io/anon/pen/KVPJwBcss3 verwandelt meinen Code ein Geschenk Öffnung
/* 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>Meine Frage: Cube öffnen, warum jedes Gesicht Unterseite des Würfels ist nicht an der Basis befestigt während der Animation?
Am Anfang und am Ende ist es in Ordnung, aber nicht während der Animation.