使用CSS3实现动态信封折叠效果

实现一个动态信封折叠效果需要用到一些 CSS3 动画和转换（transforms）。以下是一个简单的例子，展示了如何使用 CSS3 来创建一个信封折叠和展开的动画效果。

首先，我们需要创建一个信封的基本结构。HTML 结构可能如下所示：

<div class="envelope">
    <div class="envelope-front"></div>
    <div class="envelope-back"></div>
    <div class="envelope-flap"></div>
</div>

接下来，我们将使用 CSS 来样式化信封的各个部分，并添加动画效果。

.envelope {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 50px;
    perspective: 1000px; /* 为3D转换效果提供透视 */
}

.envelope-front, .envelope-back, .envelope-flap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    transition: all 1s ease-in-out; /* 添加过渡效果 */
}

.envelope-back {
    transform: rotateY(180deg); /* 初始时将背面旋转180度 */
}

.envelope-flap {
    width: 50%; /* 信封盖是信封宽度的一半 */
    height: 120%; /* 信封盖稍微长一些，以覆盖信封的前后两面 */
    left: 50%; /* 将信封盖定位在信封的右侧 */
    transform-origin: 0% 0%; /* 设置变换原点为左上角 */
    transform: rotateY(-90deg); /* 初始时将信封盖旋转-90度，使其贴在信封的右侧 */
}

/* 添加一个类来触发折叠和展开的动画 */
.envelope.folded .envelope-front {
    transform: rotateY(180deg); /* 当信封折叠时，将前面旋转180度 */
}

.envelope.folded .envelope-flap {
    transform: rotateY(0deg); /* 当信封折叠时，将信封盖旋转到与信封前面重合的位置 */
}

现在，你可以使用 JavaScript 来动态添加或删除 folded 类，从而触发信封的折叠和展开动画。例如，使用 jQuery：

$('.envelope').click(function() {
    $(this).toggleClass('folded'); // 切换 folded 类来触发动画
});

这个例子只是一个简单的起点，你可以根据需要调整样式和动画效果。例如，你可以添加更多的细节和交互性，或者使用不同的动画效果来折叠和展开信封。