14_2D&3D

一、动画属性的使用

一.帧动画的概念:表示控制元素在浏览器中进行运动
二.帧动画的解释:是一个工具,工具需要购买和使用的,动画需要定义和执行

1. 动画的定义/声明方式

   • 要在css样式表中使用
   • 使用关键字 @keyframes 自定义动画的名字{动画的运动方式:单次/多次}
   • 单次 from…to
   • 多次

2. 动画的执行/调用方式

   • 动画使用哪个元素需要运动就给哪个元素添加即可
   • 需要控制元素能运动给元素设置动画属性即可
   • 注意点
   • 动画控制元素的位置,位置的偏移需要根据大盒子进行移动
   • 设置方向的值一定要相同才会有运动的过程

三:关于动画属性的使用(动画调用执行使用了名字和时间就可以了)

1. 动画的名称

   • 属性:animation-name
   • 属性值:自定义动画的名字

2. 动画的运动时间

   • 属性:animation-duration
   • 属性值:s

3. 动画的延迟时间

   • 属性:animation-delay
   • 属性值:s

4. 动画的运动方式

   • 属性:animation-timing-function
   • 属性值:linear

5. 控制动画的运动次数

   • 属性:animation-iteration-count
   • 属性值:1/number/infinite 无限循环

6. 动画的运动方向

   • 属性:animation-direction
   • 属性值:normal

7. 动画属性的简写方式

   • 属性:animation
   • 属性值:名字 0.8s linear infinite

二、CSS3中的2D位移

位移属性的使用(移动元素的位置)

1. 属性:transform 变形/转换

2. 属性值:

   • translate(x,y) 沿着X和Y轴进行移动,当只有一个属性值的时候只会沿着X轴进行移动
   • translateX() 沿着X进行移动
   • translateY() 沿着Y进行移动

3. 拓展:位移的相关使用总结

   • 盒模型、定位可以结合过渡使用

   • 浮动属性不可以

   • 位移不会让元素脱离文档流

   • 位移可以设置负值

   文本

三、缩放属性的使用

CSS3中的缩放属性

1. 属性:transform

2. 属性值:

   • scale(x,y) 改变元素的宽高,当x和y的参数相同时候可以简写成一个
   • scaleX() 宽度
   • scaleY() 高度

3. 关于属性值中的参数使用

   • 小于0的时候 先缩小再放大(旋转180deg)

   • 等于0的时候 隐藏

   • 小于1的时候 缩小

   • 等于1的时候 不变化 显示

   • 大于1的时候 放大

   文本

四、旋转和倾斜

一.旋转属性的使用

1. 属性:transform

2. 属性值:rotate(参数)

   • rotate(一个参数) 默认为Z轴
   • rotateX() 单杠运动
   • rotateY() 钢管舞

3. 注意旋转的观察角度

   • 观察的时候永远都是站在当前这个轴的正值方向观察(正值方向看向负值方向)
   • 设置正值永远都是顺时针,负值都是逆时针

4. 引出景深效果(远小近大-视距) 有两种表达形式

   • 在父级元素上设置 perspective:1200px
   • 在子级元素上设置 transform:perspective(1200px)

二:倾斜属性的使用

1. 属性:transform
2. 属性值:
   • skew(x,y)
   • skewX()
   • skewY()

五、CSS3中的3D属性设置

一:形成3D空间,浏览器只是多了一条Z轴可以进行操作,浏览器不会有任何的变化

1. 属性:transform-style

2. 属性值

   • flat 默认值2D空间
   • preserve-3d 形成3D空间多了Z轴

二.位移属性

1. transform:translateZ(200px)
2. transform:translate3d(10px,20px,30px)

三:缩放属性

1. transform:scaleZ(2) 默认是Z轴,单独写没有效果
2. transform:scale3d(2,3,4) 需要配合x和y使用

四:旋转属性

1. transform:rotateZ(30deg)
2. transform:rotate3d(0,0,1,30deg) 前三个参数表示xyz轴开关(1\0)