HTML(28)——空间转换

HTML(28)——空间转换
空间：是从坐标轴角度定义的XYZ三条坐标轴构成了一个立体空间 Z轴位置与视线方向相同

空间转换

平移

属性：
- transform: translate3d(x,y,z);
- transform: translateX();
- transform: translateY();
- transform: translateZ();
取值：像素单位数值/百分比

默认情况下我们看不到Z轴的平移情况

视距

作用：指定了观察者与z=0平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：（添加给父级，取值范围800-1200）

perspective:视距;
```
  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;
 
    }
 
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }
 
    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>
 
<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>
```
当鼠标悬停时，产生近大远小的效果，此时Z轴移动-400px

旋转

左手法则：

属性：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向。其他手指弯曲方向为旋转正值方向

transform:rotateZ(值)

transform:rotateX(值)

transform:rotateY(值)
相关阅读:
Android - Application
考研：政治
 使用 spring-security-oauth2 体验 OAuth 2.0 的四种授权模式
 零零信安-D&D数据泄露报警日报【第34期】
【异常错误】detected dubious ownership in repository ****** is owned by: ‘
Java Metrics系统性能监控工具
 ROS C++程序终止/结束进程&& 多线程终止运行程序
 6235. 逐层排序二叉树所需的最少操作数目
 Android学习笔记 47. Intent
ARM开发初级-STM32时钟系统以及如何正确使用HAL_Delay-学习笔记08
原文地址：https://blog.csdn.net/m0_74386799/article/details/140275195

空间转换

平移

视距

旋转