CSS体验透视效果

最新推荐文章于 2024-08-28 10:15:39 发布

快乐江小鱼

最新推荐文章于 2024-08-28 10:15:39 发布

阅读量341

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/dolly_baby/article/details/131216989

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章演示了如何通过CSS的perspective属性结合动画，创建一个当鼠标悬停时图片进行360度旋转的透视效果。通过调整视距值可以改变透视的强度，使元素在视觉上产生立体感。

摘要由CSDN通过智能技术生成

CSS体验透视效果

使用css视距属性perspective结合动画效果实现透视效果。

<!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">
    <title>体会透视</title>
    <style>
        body {
            /* 视距越大效果越不明显 */
            perspective: 1000px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 5s;
            transform-origin: left;
        }

        img:hover {
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
    <img src="images/cqz/1.jpeg" width="300px" alt="">
</body>
</html>