四、动画：Z轴平移translateZ

最新推荐文章于 2024-07-26 08:00:00 发布

gaoya7305

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量110

点赞数

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

本文链接：https://blog.csdn.net/gaoya7305/article/details/131320190

版权

html+css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

目录：
1.定义
2.代码例子

1.定义

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果,必须要设置网页的视距和 transform-style: preserve-3d

2.代码例子

<body>
  <div class="box1"></div>
</body>

<style>
    html{
      /* 设置当前网页的视距位800px,就是人眼距离网页的距离，必须设置这个，translateZ才会有效果 */
      perspective: 800px;
    }
    body{
      border:1px red solid;
      background-color: rgb(241, 241, 241);
     /* 必须加了这个，translateZ才会有效果 */
      transform-style: preserve-3d
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin: 200px auto;
      /*
      过渡动画，2s内完成
      */
     transition:2s;
    }
    body:hover .box1{
      /*
     元素离我们人只有600px,看到的效果是往外变大，突出的效果。
     近大远小
      */
      transform:translateZ(600px);
    }
  </style>