空间转换 也叫3D转换
1. 空间位移: translate3d(x, y, z);
语法:
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
简写: - transform:translateX(),translateY(),translateZ();
2 空间旋转:
transform:rotate3d(x,y,z,angle); x,y,z---0/1 表示是否沿着改轴旋转
- transform:rotateX(angel);
- transform:rotateY(angel);
- transform:rotateX(angel);
简写: - transfrom:rotateX( ),rotateY(),rotateZ();
z轴: 物体远离屏幕冲向眼睛的距离
rotateZ() 旋转效果与平面rotate(x,y)的旋转效果一致
在网页中坐标系如下: 一般是第四象限的坐标系
0,0------------------------------>x +
|
|
|
|
|
y+
3. 3D效果:
网页默认效果是2d平面的 看不到3d效果
3.1 perspective:景深 透视 视距 表示眼睛到屏幕的距离 400~1200px
语法: 一般添加在开启3d效果的元素的最近一级父级元素的身上(亲爹身上)
1..fa:{ perspective:800px;}
-
作用:视距只是开启近大远小 近实远虚的视觉效果 但是实际上并没有开启3
d效果
视距效果 -
总结:
- 视距越小 物体观察成像越大
- z轴正值越大 物体距离眼睛越近 观察物体越大
- 一般情况下 视距(眼睛到物体即屏幕的距离)<z轴
** z轴和pp一样大小 就相当于物品直接移动到眼睛位置----一叶障目**
3.2 transform-style:preserve-3d; 开启3d效果
tsf:preserve-3d 开启三维立体效果*
pp和tsf需要添加在最近一级的父级元素身上 给子元素创建三维立体空间
实现方法:
1: 给最近一级父元素添加⭐⭐⭐tfs:preserve-3d和pp
2 :使子元素处于真正的3d空间
3: 默认值是flat 表示所有子元素在2D平面呈现
- 总结:没有景深效果情况下 3d旋转的效果没有 看起来只像是盒子被压扁了或者被压窄了.
3.3 左手法则: 用来判断3D旋转的方向:
**规则: 伸出左手 大拇指指向该轴的正方向 四指弯曲的方向就是盒子绕轴
左手握紧坐标轴
rotateX(deg):
正值: 大拇指指向x轴正方向,四指弯曲 -----盒子向屏幕内旋转
负值: 大拇指指向x轴负方向,四指弯曲 -----盒子向屏幕外旋转
旋转180deg 成像效果 垂直镜像
rotateY(deg):
正值: 大拇指指向y轴正方向,四指弯曲 ----- 盒子向屏幕左旋转
负值: 大拇指指向y轴负方向,四指弯曲 ----- 盒子向屏幕右旋转
rotateY(180deg) 成像效果 水平镜像
rotateZ(deg):
正值: 大拇指方向指向正方向 此时盒子顺时针旋转
负值: 大拇指方向指向正方向 此时盒子逆时针旋转
在三维空间中 点线是不占位置的 所以当绕xy旋转90deg后 视觉效果是看不见的
4 动画animation
4.1动画效果:
实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
- 制作动画
- 调用动画
- 制作动画
语法:
- 制作动画
(1) @keyframes 动画名{
from{初始状态}
to{结束状态}
}
(2) 可以让动画拥有多个状态，百分比指的是动画执行过程中的某一点百分比。（阶段性）
@keyframes 动画名{
0%{}
66%{}
100%{}
}
注意:
(3) 动画名不能重复 后面会把前面的层叠覆盖
(1) 动画初始状态和默认值一样 可以省略不写
(2) 动画名不可以使用running running是关键词
(4) 可以参与过渡的属性 都可以做动画- 动画调用:
谁需要使用动画效果 就把animation属性记在谁身上
animation: 动画名称 动画时长;
- 动画调用:
动画和:hover伪类选择器之间的区别:
动画效果可以自己触发 不需要鼠标事件触发即可执行
4.2动画的属性
- animation属性连写时 可以不计顺序也可以略写
⭐当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
animation-name : 动画名称 必须属性
animation-duration : 动画时长 必须属性
animation-timing-function : 速度曲线 linear ease//steps(数字)--精灵动画
1. linear/ease 一般做补间动画 没有卡顿感
2. ⭐ steps(数字):逐帧动画--精灵图做动画
animation-delay: 延迟时间
animation-fill-mode: 动画执行完毕时状态 forwards 最后一帧状态
backwards 第一帧状态
animation-iteration-count 重复次数 infinite 无限循环
animation-direction 动画执行方向 alternate 去 回
animation-play-state 暂停动画 paused暂替 通常配合hover
谁组动画 给谁hover##
多个动画一起书写时, 之间用','隔开
5 私有前缀：
-moz-:代表firefox浏览器私有属性
-ms-:代表IE浏览器私有属性
-webkit-:代表safari和chrome私欲属性
-o-:代表Opera私有属性
案例:总结:
- 盒子宽度不够时 可以将ul的宽度放大 这样就可以li在一行排列
- 轮播图播放 当图片全部移走时出现空白时 可以多放几个图片 但是不做动画 用来做无缝轮播
- 逐帧动画: 可以用背景图放置图片 bg-p改变背景图片的位置
