这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效。这个效果使用3D CSS animations 来制作折叠面板的动画，纯CSS，没有使用javascript。
HTML结构
折叠面板的html结构使用一个嵌套的div结构。内容需要放置在正确的地方。
第一个divparent1将被设置为3D状态。第二级div包含所有在动画时的可视代码。第三级div用于设置折叠面对动画的内容。
CSS样式
该折叠面板动画完整的CSS代码十分有意思，可能会与你想象的有所不同。
/* Static state */
#container {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #ccc;
}
.parent1 {
/* overall animation container */
height: 0;
overflow: hidden;
transition-property: height;
transition-duration: 1s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
/* full content during animation *can* go here */
}
.parent3 {
/* animated, "folded" block */
height: 56px;
transition-property: all;
transition-duration: 1s;
transform: rotateX(-90deg);
transform-origin: top;
}
/* Hover states to trigger animations */
#container:hover .parent1 {
height: 111px;
}
#container:hover .parent3 {
transform: rotateX(0deg);
height: 111px;
}
静止状态的parent1被设置为3D transform和perspective状态，动画从高度为0像素开始。parent3使用transition和transformation来设置旋转动画。当鼠标滑过parent1时，parent3的高度转换为完整的高度，在这个demo中是111px，角度被旋转到0度。
