我们浏览网页时，希望网页以动态状态呈现，而不是简单的静态页面，这有利于增强用户体验。例如以头像为例，我们会对它设置旋转等效果。那么图片的旋转效果怎么做呢？这里 W3Cschool 小编教大家一种不需要用到 JavaScript，用 CSS 即可实现图片旋转效果。
先让我们来看下实现效果：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS图片旋转 - 编程狮(w3cschool.cn)</title>
<style type="text/css">
div img{
transition:all 1s;
}
div:hover img{
transform:rotateY(180deg);/*将图片按Y轴180度旋转*/
}
</style>
</head>
<body>
<div><img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]" alt="w3cschool"></div>
</body>
</html>transform：rotate 即实现旋转效果，如果将上述参数改为（90deg），图片只旋转 90°。以此代码例子而言，图片会折叠消失。
以上就是 CSS 如何设置图片旋转的全部内容。更多 CSS 样式请关注 W3Cschool 官网。
推荐课程：CSS教程
声明：小猿资源站是一个资源分享和技术交流平台，本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
