- 使用通配符选择器
*将页面中所有元素的外边距和内边距设置为0，以避免默认样式的影响。 - 定义了一个
.container类，用于设置容器的样式。容器宽度为150px，高度为200px，使用相对定位并设置透视效果（perspective）为1000px，以实现翻转动画效果。 .card类定义了每个卡片的样式。设置卡片的宽度和高度为100%，使用绝对定位，保持三维变换效果（transform-style: preserve-3d），并设置过渡动画（animation）为名称为flip-animation的动画，持续时间为4秒，无限循环播放。.front和.back类分别表示卡片的正面和背面，并设置它们的样式。正面和背面都使用绝对定位，设置不可见的背面（backface-visibility: hidden），并使用弹性布局（Flexbox）将内容居中显示，并设置文字颜色为白色（#fff）。- 正面的背景使用线性渐变（linear-gradient）设置为从红色到黄色的渐变；背面的背景使用线性渐变设置为从绿色到白色的渐变。
* { margin: 0; padding: 0; } .container { width: 150px; height: 200px; position: relative; perspective: 1000px; } .card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: flip-animation 4s infinite; } .front, .back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; color: #fff; } .front { transform: rotateY(0deg); background-image: linear-gradient(109.6deg, rgba(245, 56, 56, 1) 11.2%, rgba(234, 192, 117, 1) 78%); background-color: aquamarine; } .back { transform: rotateY(180deg); background-image: linear-gradient(117deg, rgba(123, 216, 96, 1) 39.2%, rgba(255, 255, 255, 1) 156.2%); background-color: bisque; } @keyframes flip-animation { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }
- 卡片会无限循环地执行翻转动画，通过设置
.card类的animation属性为flip-animation，持续时间为4秒，并且设置为无限循环播放（infinite）。这样卡片就会不断地从正面翻转到背面，再从背面翻转回正面，形成无限循环翻转的效果。 - 正面和背面的内容可以通过修改
<div class="front">和<div class="back">的文本内容来更改。
效果如下：
