day02-移动web

@TOC day02-移动web
一、空间转换
1.1 空间位移
1.2 透视效果
1.3开启3d空间
1.4 空间旋转
1.4.1 空间旋转-Z轴
1.4.2 空间旋转-X轴
1.4.3 空间旋转-Y轴
1.4.4 沿着多条对称轴旋转
1.5 立体呈现
1.6 3D导航

day02-移动web
一、空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是以坐标轴定义的。x、y和z三条坐标轴构成了一个立体空间，规定z轴的位置与视线方向相同。
本质：在平面转换的基础上，多出一个Z轴可缩放、旋转、位移
属性：transform
1.1 空间位移
目标：使用translate实现元素空间位移效果
语法：
1.连写：transform: translate(x， y，z)
2.单方向：transform: translateX() 或 translateY()或 translateZ()
3.快捷键：tf (transform)、ts (translate)
取值（正负均可）
1.像素单位数值
2.百分比
注意：
X轴正向为右，Y轴正向为下，Z轴贴近眼睛方向为正
translate()
如果只给出一个值, 表示x轴方向移动距离，例：transform: translate(100px);表示向右平移100px.
单独设置某个方向的移动距离：translateX() & translateY()& translateZ()
默认情况下，z轴移动观察不到效果
易错点：若多方向位移时，同一属性会被覆盖，此时最底下的那个生效。）（特殊：z轴默认看不到效果）
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}

.box:hover {
  /* 此时只有Y轴生效 */
  /* transform: translateX(-100%);
  transform: translateZ(-100%);
  transform: translateY(-100%);  */

  /* 连写：此时 位移只有x轴和y轴有效果*/
  transform: translate3d(200px,200px,200px);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.2 透视效果
目标：使用perspective属性实现透视效果
属性：（添加给父级）
perspective: 值;
取值：像素单位数值，数值一般在800~1200
快捷键：pe
作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果
注意：
1.Z轴不能大于父级的取值，否则会出现闪屏
2.透视属性只是视觉上放大缩小盒子，并不会产生真正的3d效果
————————————————