02-移动web第二天
空间转换、动画
一、空间转换/3d转换
3维坐标系【模拟、裸眼3d】 属性:transform
对浏览器、兼容性要求高
目标
- 使用transform属性实现元素在空间内的位移、旋转、缩放等效果
1、 空间位移
-
transform: translate(100px) 与 transform: translateX(100px) 效果一样,默认向x轴正方向移走100px
-
transform: translateY(100px) 向Y轴正方向移走100px
-
transform: translate(100px,100px) 向交点方向移走100px
- 平面上的位移,无需借助第3只眼睛 perspective
-
transform: translateZ(100px) 向z轴正方向移走100px
- 空间上的位移,需要借助第3只眼睛 perspective:值 【数值一般在400 – 1200】 只能达到近大远小、近实远虚的视觉效果
如果没有第3只眼睛,我们肉眼看不到变化
- 第3只眼睛【透视、视距、景深】是给需要空间位移的元素的父级元素添加,一般是给body添加
- 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
- perspective: 600px; 眼睛距离屏幕600px,
transform: translateZ(100px) 元素向眼睛向前走100px
-
当perspective: 600px; 眼睛距离屏幕600px情况下的几种情况: ①盒子translateZ(100px) 有变大高效果 ②盒子translateZ(600px) 铺满整个屏幕【盒子走到眼睛前】 盒子translateZ(800px) 盒子走到后面了,变大后不见
-
transform: translate3d(300px, 300px, 300px);方向为矢量 类似于坐标轴交点方向 与 transform: translateX(300px) translateY(300px) translateZ(300px); 效果一样
2、空间旋转
- transform: rotate(360deg); 【平面】 与 transform: rotateZ(360deg); 呈现效果一样,按元素中心点旋转
- transform: rotateX(360deg); 沿着元素的中心x轴旋转
- transform: rotateY(360deg); 沿着元素的中心y轴旋转
- 可以自定义轴方向旋转: rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度 【x,y,z 取值为0-1之间的数字】 矢量与原点连接的方向
多轴同时旋转:【一般情况下 只在 x轴和 y轴同时旋转 ---在立体效果时会经常用到,用来开启上帝视角,俯视,3d旋转,更直观观测空间移动,可以先写0deg,然后在页面中调】
- transform: rotateX(-45deg) rotateY(50deg) rotateZ(50deg);
- 记得加上透视
- 当元素旋转了,所对应的坐标轴方向也会跟着旋转
- 左手法则 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
因为perspective只能增加近大远小、近实远虚的视觉效果,无法呈现立体效果
- 此时就需要 transform-style: preserve-3d 呈现立体图形【同时保留近大远小的效果】 简写 tfs
transform-style: flat 为默认值,平面效果
- 早年用于 立体轮播图
- 给想要3d效果的盒子【一般是z轴位移的元素】的父元素添加【让父元素创造3d环境】
二、动画
与过渡的区别:
①过渡需要【手动点击】才会运动,只能实现2个状态间的变化过程【1来1回】
动画:
①过程可控(重复播放、最终画面、是否暂停),无需手动点击 ②实现多个状态间的变化过程【可以无限次】
-
本质是快速切换大量图片时在人脑中形成的具有连续性的画面。 最小单元:帧或动画帧
-
步骤
- 第①步:定义动画 @keyframes 动画名称
-
单独写在style里
- 有两种方式
- 只有两种状态:起始 终止
- 多种状态【时间序列】 百分比*时间
- 第②步:调用动画【写在运动的元素里】
animation :动画名称 动画花费时长
以上两个为必写属性
- 连写方法:animation: 动画名称 动画执行时间 动画延迟 速度曲线(linear) 播放次数(无限次infinite) 反向播放(alternate) 停留结束位置(forwards)
1. 动画连写属性没有顺序限制
2.如果动画执行时间和延迟时间同时出现,写在前面的是执行时间,写在后面的是延迟时间
3. 需要记住的单词
速度曲线中的匀速 linear
播放次数中的 无限次播放 infinite
反向播放动画 alternate
动画停留在结束位置 forwards
-
- 分开写方法:
- animation-delay 动画延迟 ,也常用于给动画添加律动
- 速度曲线中的匀速 linear 中间状态的变化为补帧动画,浏览器渲染
走路,秒针,运动,一般配合精灵图实现动画效果 背景图片 背景图片的位置移动 background-position animation-timing-function steps(数字):逐帧动画
解题思路:
1、是否需要开启上帝视角 2、是否需要添加透视 3、是否需要创造3D环境 4、如何定位 5、摆放的布局