3D转换-位移和透视

最新推荐文章于 2024-09-10 23:15:40 发布

秋枫 ~

最新推荐文章于 2024-09-10 23:15:40 发布

阅读量102

点赞数

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

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/126450170

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

位移

语法
- transform:translate3d(x,y,z);
- transform:translateX(值);
- transform:translateY(值);
- transform:translateZ(值);
  - 取值
    - 像素单位数值
    - 百分比
为何默认情况下，无法观察到Z轴位移效果？
- Z轴是视线方向，移动效果应该是距离的远或近，电脑显示屏是平面，默认无法查看远近效果。

添加透视即可查看Z轴效果

属性（添加给父级）
- perspective: 值;
  - 取值：像素单位数值，数值一般在800 - 1200

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位移和透视</title>
    <style>
        body {
            perspective: 1000px;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
        }

        .box:hover {
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>