CSS 3D转换 transform 动画 animation

3d转换属性

• 什么是3d的场景呢？
  2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
  3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
  Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
  

CSS3中的3D变换主要包括以下几种功能函数：

3D位移：

CSS3中的3D位移主要包括translateZ()和 translate3d()两个功能函数；

3D旋转：

CSS3中的3D旋转主要包括 rotateX()、rotateY()、 rotateZ()和 rotate3d()四个功能函数；

3D缩放：

CSS3中的3D缩放主要包括 scaleZ() 和 scale3d()两个功能函数；

transform-style

• 设置元素显示的视角，3d元素必须设置此属性为3d视角；
• 属性值：flat | preserve-3d;
• preserve-3d 表示所有子元素在3D空间中呈现。 flat 表示所有子元素在2D平面呈现。

perspective

• 设置3d元素居视图的距离，也就是视点距离；允许你改变3D元素是怎样查看透视图
• 景深(value) 离屏幕多远的距离去观察元素，值越大幅度越小
• 两种方式：一种可以给父元素写，一种给子元素加
• 两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
  如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
• 定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身；常用的设置 ： perspective：600px; perspective：1200px;
• 例如 ：

 .container {
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border: 1px solid #bbb;
  perspective: 600px;
}
.box {
  width: 200px;
  height: 200px;
  opacity: .75;
  background-color: darkblue;
  transform: rotateY(45deg);
}                

transform方法：

translate( ) 、
rotate( ) 、
scale( ) 、
perspective( )、

方法介绍：

1、rotate3d()

• 可分为： rotateX() 、rotateY( )、 rotateZ( )、

(1) rotateX() （围绕x轴旋转，正数向外，负数向内）

(2) rotateY() （围绕y轴旋转，正数向内，负数向外）

(3) rotateZ() （围绕z轴旋转，正数顺时针，负数逆时针）

(4) rotate3d( ) 写法：rotate3d(x,y,z,deg);

• 其中x、y、z的值可设0或1，0代表不参与旋转，1代表参与，最后设置deg旋转的角度；
  

2、translate()

• 写法：translateX( ); translateY(); x轴和y轴的移动同2d类似；
• translateZ( ) z轴方向的移动是向前延伸（或向后缩减），会感觉拉近（拉远）与视点的距离（有种放大或缩小的错觉）
• translate3d()函数的效果 transform:translate3d(30px,30px,200px);
  值代表X轴、Y轴、Z轴（Z轴正值在前负值在后）的移动距离,可为0
• Z轴正值在前负值在后需在父元素中添加transform-style ： preserve-3d转成3D呈现

3、scale()

• 写法：scaleX() 、scaleY()、scaleZ()、scale3d() 设置元素的缩放
• scaleZ() 和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果 如 transform: scale3d(1,1,2) rotateX(45deg);

CSS3动画

• CSS3中可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
• CSS3属性中有关于制作动画的三个属性：transform, transition, animation
• @keyframes规则创建动画
  用于创建动画，可以规定某项样式由当前样式逐渐改变成新样式的动画效果；

animation 属性 ：用来设置动画相关的属性；

• 注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性，Chrome 和 Safari 需要前缀 -webkit-，IE9及以下的不支持；需要 -webkit-, -ms- 或 -moz- 前缀的支持；

animation 属性 ：

animation复合属性。检索或设置对象所应用的动画特效。

1.animation-name 检索或设置对象所应用的动画名称

• 说明：必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove

2.animation-duration 检索或设置对象动画的持续时间

• 说明：animation-duration:3s; 动画完成使用的时间为3s

3.animation-timing-function 检索或设置对象动画的过渡类型

• 说明： linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• linear匀速
  ease-in：由慢到快。
  ease-out：由快到慢。
  ease-in-out：由慢到快再到慢。
  step-start跳到鼠标开始那帧
  step-end跳到鼠标结束那帧

4.animation-delay 检索或设置对象动画延迟的时间

• 说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

5.animation-iteration-count 检索或设置对象动画的循环次数

• 说明：animation-iteration-count: infinite | number;
  infinite：无限循环 number: 循环的次数

6.animation-direction 检索或设置对象动画在循环中是否反向运动

• 说明：
  normal：正常方向
  reverse：反方向运行
  alternate：动画先正常运行再反方向运行，并持续交替运行
  alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state 检索或设置对象动画的状态

• 说明：
  animation-play-state:running | paused;
  running:运动
  paused: 暂停
  animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

使用方法：

• 在 @keyframes 中创建动画时，请把它捆绑(animation)到某个选择器，否则不会产生动画效果。
• 通过规定至少这两项 CSS3 动画属性，即可将动画绑定到选择器 :
• 规定动画的名称
• 规定动画的时长

首先：
animation属性： 创建动画名称 动画完成时间 （infinite无限播放）；
之后：

@keyframes  动画名称 {
    from {background: red;} 
    to {background: yellow;} 
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

或者：

@keyframes 动画名称{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

animation和transition的区别

• 相同点：都是随着时间改变元素的属性值。
• 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，
  animation就需要明确的动画属性值, transition只能实现从开始到结束的简单动画；而animation可以实现逐帧动画

animate.css动画库的使用

在线地址
animate.css里面的类，主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)
动画库效果
<link rel="stylesheet" href="animate.min.css">

p {
       animation: bounceInDown 2s linear infinite; 
   }