5
ここで現在の開口部をシミュレートするために変換します。 http://codepen.io/anon/pen/KVPJwBCSS3は私のコード
/* 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>私の質問：キューブを開く、はなぜ各キューブの顔下側がベースに接続されていませんアニメーション中に？
開始時と終了時はアニメーション中ではありませんが、大丈夫です。