css 翻转

作者：血之メ狂霸发布日期:2026-01-04 浏览:101

/* CSS 翻转示例代码 */

/* 水平翻转 */
.flip-horizontal {
  transform: scaleX(-1);
}

/* 垂直翻转 */
.flip-vertical {
  transform: scaleY(-1);
}

/* 3D 翻转效果（沿 Y 轴） */
.flip-3d-y {
  transform: rotateY(180deg);
}

/* 3D 翻转效果（沿 X 轴） */
.flip-3d-x {
  transform: rotateX(180deg);
}

/* 解释说明：
- `scaleX(-1)`：水平翻转元素，即将元素在 X 轴上翻转 180 度。
- `scaleY(-1)`：垂直翻转元素，即将元素在 Y 轴上翻转 180 度。
- `rotateY(180deg)`：沿 Y 轴旋转元素 180 度，实现 3D 翻转效果。
- `rotateX(180deg)`：沿 X 轴旋转元素 180 度，实现 3D 翻转效果。
*/

上一篇：css鼠标禁用样式

下一篇：css :before