css 动画效果

最新推荐文章于 2025-02-17 08:00:00 发布

全栈小天

最新推荐文章于 2025-02-17 08:00:00 发布

阅读量596

点赞数 1

文章标签： css 动画 css3

本文链接：https://blog.youkuaiyun.com/Web_ZAHNG3/article/details/122270885

版权

本文通过HTML和CSS展示了如何实现鼠标悬停时图片旋转并平滑过渡的效果。使用了`perspective`属性创建透视效果，`transition`属性定义过渡时间和类型，以及`transform`属性来控制图片的旋转。当鼠标移过图片时，图片会360度顺时针旋转，移开则返回初始状态。这是一个基础的前端交互设计技巧。

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

实现效果

鼠标移到图片上图片旋转，移走回位
在这里插入图片描述

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;  /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/
        }
        img {
            margin: 100px;
            transition: all 5s;
        }
        img:hover {
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
<img src="images/1498446043198.png" WIDTH="300" alt=""/>
</body>
</html>