CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放

最新推荐文章于 2024-07-25 15:07:09 发布

小琳爱分享

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量1.1k

点赞数 3

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

本文链接：https://blog.csdn.net/qq_45708377/article/details/125964829

版权

CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放

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

一.空间（3D）转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
属性：transform
在这里插入图片描述

（1）位移效果（Z轴方向需要配合perspective透视使用）

空间位移的目标：使用translate实现元素空间位移效果

语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）像素单位数值或百分比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    body{
      perspective: 100px;
    }
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all .5s;
    }
    .box:hover {
      transform: translate3d(50px, 100px, 20px);
      transform: translate3d(50px, 100px, -20px);
      /* transform: translateX(500px); */
      /* transform: translateY(500px); */
      /* transform: translateZ(500px); */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

（2）透视效果

目标：使用perspective属性实现透视效果
~~~~加给父级元素
实现近大远小、近实远虚的视觉效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      /* 加到父级元素，这里 */
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      b