移动 Web核心笔记（二）

空间转换

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

属性：transform

平移

/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值（正负均可）

•  像素单位数值
•  百分比（参照盒子自身尺寸计算结果）

提示

默认情况下，Z 轴平移没有效果

视距 perspective

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

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

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

旋转

配合 视距perspective（800~1200） 效果更佳哦

/*绕着z轴而转 方向：顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向：向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向：向里面*/
transform: rotateY(值deg);

左手法则 – 根据旋转方向确定取值正负

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

立体呈现 – transform-style

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

属性名：transform-style

属性值：

flat：子级处于平面中

preserve-3d：子级处于 3D 空间

 /*给父级元素*/
transform-style: preserve-3d;

呈现立体图形步骤

1. 父元素添加transform-style: preserve-3d；

2. 子级定位

3. 调整子盒子的位置（位移或旋转）

提示 : 空间内，转换元素都有自已独立的坐标轴，互不干扰

旋转改变了原有的坐标轴向

缩放

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

动画 （animation）

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

/*定义动画:第一种*/
@keyframes 动画名称 {from{}to{}
}
/*定义动画:第二种*/
@keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/0% {}10%{}......100%{}
}

使用动画：

animation:动画名称 动画时长（s） 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
速度曲线：linear 匀速运动
分布动画：steps() 配合精灵图使用

提示：

动画名称和动画时长必须赋值 

取值不分先后顺序

如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

 /* 动画时长 */
animation-duration: 1s;/* 播放次数 */
animation-iteration-count: infinite;
.box:hover {/* 暂停动画 */animation-play-state: paused;}

多组动画

animation:动画1，动画2，动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;

img {/*图片为行内元素，不能设置宽高，要变为块元素，切记  */display: block;width: 200px;}