2D转换模块-透视属性

最新推荐文章于 2023-12-22 11:08:11 发布

jwz934738949

最新推荐文章于 2023-12-22 11:08:11 发布

阅读量297

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML与CSS

本文链接：https://blog.youkuaiyun.com/jwz934738949/article/details/90415100

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

博客介绍了2D转换模块中的透视属性，其本质是近大远小，常与旋转属性结合使用，格式为perspective:具体像素。还指出透视属性要放在要修改元素的上一级元素中，且值越小透视效果越明显，值越大效果越不明显。

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

在2D转换模块中的透视属性，它的本质是近大远小，他总是与旋转属性结合在一起使用。

格式为：perspective:具体像素。

注意点：

透视属性只能放在要进行修改的元素的上一级元素中，放在本级元素中无效；

透视属性的值越小，透视效果越明显，值越大，透视效果越不明显。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 400px;
            width: 300px;
            background-color: blue;
            border: 1px solid #000;
            margin: 200px auto;
            perspective: 400px;
        }

        div:hover img {
            transform: rotateX(60deg);
            transform-origin: bottom;
            transition: 1s;
        }

        div img {
            height: 400px;
            width: 300px;
        }
    </style>
</head>
<body>
<div>
    <img src="111.png" alt="">
</div>
</body>
</html>