css图片旋转180样例

最新推荐文章于 2025-07-07 10:12:19 发布

原创最新推荐文章于 2025-07-07 10:12:19 发布 · 1.9w 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS实现元素旋转的方法，并通过jQuery来控制该旋转效果的交互。具体而言，通过定义不同的CSS类来设置元素的正常状态和翻转状态，并利用jQuery的点击事件切换这两个状态，实现了平滑过渡的动画效果。

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
#test{
width:30px;
height: 30px;
background:url("image/organization.png");
float:left;
}

.test-normal{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: transform .5s;
}

.test-inverse{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transition: transform .5s;
}

</style>

</head>

<body>

<div id="test" class="test-normal"></div>

<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$("#test").click(function(){
if($(this).hasClass("test-inverse")){
$(this).removeClass("test-inverse")
}else{
$(this).addClass("test-inverse")
}
});
</script>

</body>

</html>