html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效

这是一款纯 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度。