利用伪元素实现div背景图旋转 div内容不旋转

臧小川

于 2021-08-28 00:26:07 发布

阅读量1.1k

点赞数

臧小川

本文链接：https://blog.youkuaiyun.com/chuan0106/article/details/119962740

版权

该博客介绍了如何使用CSS实现一个背景图翻转180度的动画效果，同时保持文字不翻转。通过创建伪元素和应用transform属性及animation关键帧，展示了鼠标悬停时的动态变换，并给出了具体的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

朋友今天有这么个需求 DIV 放背景图翻转180deg 且文字不翻转还要做成动画直接cv不解释

效果图
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <

最低0.47元/天解锁文章