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

这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效。这个效果使用3D CSS animations 来制作折叠面板的动画，纯CSS，没有使用javascript。

HTML结构

折叠面板的html结构使用一个嵌套的div结构。内容需要放置在正确的地方。

<div id="container">
    <div class="parent1">
        <div class="parent2">
            <div class="parent3">
                <!-- Content goes here -->
            </div>
        </div>
    </div>
</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度。