5
Ở đây mã của tôi: http://codepen.io/anon/pen/KVPJwBcss3 biến để mô phỏng một mở hiện
/* 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>Câu hỏi của tôi: Mở cube, tại sao khuôn mặt phía dưới cùng của mỗi khối không gắn liền với cơ sở trong hoạt hình?
Khi bắt đầu và kết thúc, nó không sao nhưng không phải trong khi hoạt ảnh.