/* 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
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站