前端移动web高级详细解析二(1)

移动 Web 第二天

01-空间转换

空间转换简介

• 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
  
• 空间转换也叫 3D转换
  
• 属性：transform
  

平移

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

取值与平面转换相同

默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

视距

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

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

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

perspective: 视距;

旋转

• Z 轴：rotateZ()
  

• X 轴：rotateX()
  

• Y 轴：rotateY()
  

左手法则

作用：根据旋转方向确定取值正负

使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

rotate3d-了解

• rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  
• x，y，z 取值为0-1之间的数字
  

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

• flat：子级处于平面中
  
• preserve-3d：子级处于 3D 空间
  

案例-3d导航

案例步骤：

1. 搭建立方体

1. 绿色是立方体的前面
   
2. 橙色是立方体的上面
   

2. 鼠标悬停，立方体旋转
   

.nav li {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;
​
  transform-style: preserve-3d;
​
  /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
  /* transform: rotateX(-20deg) rotateY(30deg); */
}
​
.nav li a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
​
/* 立方体每个面都有独立的坐标轴，互不影响 */
.nav li a:first-child {
  background-color: green;
  transform: translateZ(20px);
}
​
.nav li a:last-child {
  background-color: orange;
  transform: rotateX(90deg) translateZ(20px);
}
​
.nav li:hover {
  transform: rotateX(-90deg);
}

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

前端移动web高级详细解析二(1)：https://developer.aliyun.com/article/1393390?spm=a2c6h.13148508.setting.25.434b4f0eJFR9Df