css3上下翻转动画 |css 跟源代码分开

下面是一个简单的例子，展示如何通过CSS3实现上下翻转动画：

/* 容器的样式 */
.flip-container {
perspective: 1000px;
}
/* 卡片的样式 */
.flip-container .flipper {
position: relative;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
}
/* 正面样式 */
.flip-container .front,
.flip-container .back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
/* 正面样式 */
.flip-container .front {
z-index: 2;
}
/* 背面样式 */
.flip-container .back {
transform: rotateX(-180deg);
}
/* 翻转时的样式 */
.flip-container.flipped .flipper {
transform: rotateX(-180deg);
}
.flip-container.flipped .back {
z-index: 2;
}
.flip-container.flipped .front {
z-index: 1;
transform: rotateX(180deg);
}

实现代码中，大家首先在容器（.flip-container）上设置了perspective属性，它决定了3D场景的深度感，并且必须要设置在容器上。

接着，在卡片（.flipper）上设置了transform-style属性为preserve-3d，表示元素内的子元素保留其3D空间，而不是将它们压缩到单个平面上。

然后，大家对卡片的正面和背面分别设置了样式，其中backface-visibility属性设置为hidden表示元素不可见，从而实现了翻转时的效果。

最后，在容器上加上一个.flipped类，在点击时使用JavaScript动态地给容器添加或移除这个类，以此实现卡片的翻转效果。

通过以上代码，大家就成功实现了一个简单的上下翻转动画效果。借助CSS3强大的特性，大家不仅能够实现更多的翻转方式，还能将其应用于更广泛的场景中，从而让页面更加丰富多彩。