1:景深
景深效果:远小近大 100~1200px
两种写法
1.添加在父级元素上 perspective: 1200px
2.添加在子级元素上 transform:perspective(1200px)
- 常用的是父级写法 子级使用的时候会被覆盖
- 景深效果在旋转中表示远小近大 离浏览器的边框是靠近用户的说明是正值
2:3d的实现
浏览器默认的空间是2d空间 只有x轴和y轴 是没有z轴的
z轴是3d空间独有的 设置形成3d空间的属性
形成3d空间属性:transform-style(父级元素)
- flat 默认值 2d空间
- preserve-3d 形成3d空间(多出一条Z轴 但是浏览器观察没有区别)
css3 3d 中的变形属性
1.位移属性 transform
- translate(X,Y) x和y进行移动
- translateX()
- translateY()
- translateZ()
- translate3d(x,y,z)
2.旋转属性 transform
- rotate() 不写轴向默认是Z轴
- ratateZ() 写和不写的效果是一样 都表示z轴方向
- rotateX()
- rotateY()
- rotate3d(x,y,z矢量值,角度值)
- 开关 常用的矢量值0和1
- 0:关闭 1:打开
3:动画的实现
关键帧动画的使用: 控制元素在浏览器中进行简单的运动
1.声明关键帧动画
- 属于css属性 样式表中声明
- 使用关键字 @keyframes 动画的名称{运动方式}
- 动画的名称需要自定义
- 运动方式
- 单次运动 from...to
- 多次运动 百分百表示
2.调用关键帧动画
- 设置相对应的css属性
- 哪个元素需要运动就给哪个元素添加动画属性即可
注意:
- 要设置定位属性
- 设置方向的属性值一定要相同(left:0 => left:400px)
3.动画中的属性
- animation-name 动画的名字
- animation-duration 动画的时间
- ms、s
- animation-timing-function 运动方式
- animation-delay 延迟
- animation-iteration-count 循环次数
- 属性值默认为1 数字2
- infinite 无限循环
- animation-direction 运动方向
- normal 正常的 顺时针
- reverse 反向的
- animation-play-state 运动的状态
- running 运动
- paused 暂停
4.简写方式
- 属性:animation
- 属性值:动画的名字 动画的时间 匀速 infinite
关键帧的定义
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
@keyframes mymove{
0%{初始状态属性}
50%(中间再可以添加关键帧)
100%{结束状态属性}
}