空间转换
空间转换
属性：transform
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
l transform: translateZ(值);
取值（正负均可）
像素单位数值（deg）
百分比
透视
属性（添加给父级）
perspective: 值;
取值
像素单位数值， 数值一般在800 – 1200。
作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
立体呈现
呈现立体图形步骤
盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）
注意
空间内，转换元素都有自已独立的坐标轴，互不干扰
3D导航
实现思路
搭建立方体
1、li标签
添加立体呈现属性transform-style: preserve-3d
添加旋转属性
2、a标签
调节位置
3、调节a标签的位置
a标签定位（子绝父相）
英文部分添加旋转和位移样式
中文部分添加位移样式
4、过渡效果
鼠标滑过li， 添加空间旋转样式
li添加过渡属性
空间缩放
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
动画
动画的实现步骤
实现步骤
定义动画
使用动画
动画属性
注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
逐帧动画
帧动画。开发中，一般配合精灵图实现动画效果。
属性
animation-timing-function: steps(N)；
将动画过程等分成N份
