1.3D空间转换:
多了一条z轴,z轴位置与视线方向相同 往外为正 往内为负
①位移:transform:translatex/y/z(距离),translate3D(x,y,z);没有就写0 不能省略
②旋转:transform:rotatex/y/z(角度),rotate(x,y,z,deg); 设置自定义旋转轴的位置及角度 x,y,z取值为0-1之间的数字
③缩放:transfrom:scalex/y/z(倍数),scale3D(x,y,z,倍数);(大于1放大 小于1缩小)
左手准则 拇指朝正方向 手指弯曲方向为旋转正值方向
透视(视距):perspective:xxpx;(800~1200)(人的眼睛到屏幕的距离)值越小则表示人的眼睛到屏幕的距离越近)(产生一个近大远小的效果)(写在被观察元素的父盒子上)
3D呈现(不常用):transform-style:preserve-3d(开启)/ flat(不开启)(默认值表示子元素处于2D平面内呈现);控制子元素是否开启三维立体环境
案例:3D导航
2.动画 animation
过渡:两个状态用过渡
动画:实现多个状态间的变化过程,动画过程可以控制(重复播放、最终画面、是否停止)
动画本质:快速切换大量图片时在人脑中形成具有连续性的画面
构成动画的最小单元:帧或动画帧
使用方法:
①定义动画: @keyframes 动画名称{
from / 0%{}
(动画的开始状态和盒子的默认状态样式相同 代码可以省略)
to / 100% {}
}
②调用动画:
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
(动画名称和时长必须赋值 取值不分先后 如有两个时间值,第一个时间表示动画时长 第二个表示延迟时间)
多个动画 动画名称用逗号隔开
速度曲线: linear(匀速 补间动画) steps()(逐帧动画 配合精灵图使用))
延迟时间:xxxs
重复次数:infinite (无限循环)
动画方向:alternates (带有反向的动画效果)
执行完毕状态:重复次数和动画方向要去除,backwards 停留在最初状态(默认值)
forward(停留在结束时的状态)
案例:人物奔跑
先定义一个显示区域 该区域的大小和精灵图的宽高相同(单个精灵图的宽)
在将精灵图设置为背景图 再定义动画 最后调用
@keyframes move {
/* 定义动画 改变背景图的位置 移动的距离是精灵图位置 */
from{
background-position: 0 0;
}
to{
background-position: -1680px 0;
}
}
.box{
move 5s steps(12) infinite;
}
案例:走马灯(无缝动画) 全民出游案例