css特效网站

/* 示例代码：CSS 3D旋转特效 */

.container {
  perspective: 1000px; /* 设置透视效果 */
}

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  transition: transform 0.5s; /* 添加过渡效果 */
  transform-style: preserve-3d; /* 保持3D转换 */
}

.box:hover {
  transform: rotateY(180deg); /* 鼠标悬停时旋转180度 */
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}

.front {
  background-color: lightcoral;
}

.back {
  background-color: lightgreen;
  transform: rotateY(180deg); /* 初始状态下背面旋转180度 */
}

解释说明：

1. perspective: 设置容器的透视效果，使3D转换看起来更真实。
2. transform-style: preserve-3d: 确保子元素在3D空间中保持其3D位置。
3. transition: 为变换添加平滑的过渡效果。
4. rotateY(180deg): 当鼠标悬停在 .box 上时，元素将沿Y轴旋转180度。
5. backface-visibility: hidden: 隐藏元素的背面，确保只有正面和背面交替显示。

这个示例展示了如何使用CSS创建一个简单的3D旋转特效。