过渡/2D变形属性/3D变形/动画_css translate3d 随鼠标移动而变化

过渡 transition

  [tansition 过渡/转变]

  transition是 css的属性值在一定的时间内从一个状态渐渐变到另一个状态。

transition需要添加触发条件，比如鼠标点击、鼠标滑入，获取焦点来改变元素css的属性值。

1. transition-property：元素中参与过渡的css属性   [property 属性,特性,财产]

2. transition-duration：元素过渡的持续时间

3. transition-delay：元素 延迟过渡的时间  (何时开始)

4. transition-timing-function：元素中过渡的动画类型(运动曲线)  默认:ease

过渡的动画类型库   http://cubic-bezier.com/

简写:

  transition:all 5s 10s;     第一个时间是过渡时间,  全部属性,不写或写all

transition的使用规则

1.transition添加给要改变的元素。(谁要变加给谁)

2.要改变的元素的css属性值必须是具体的数值（像素、百分比）。

3.要改变的元素的css属性，必须有起始值和目标值。

4.transition-property:position或者写position的属性值过渡不支持,直接写all

---

变形属性：transform 

css属性,实现元素的位移,旋转,缩放等

[transform  变型,改变形状]

2D平面

1. x轴是水平的，向右为正,向左为负。
2. y轴是垂直的，向下为正，向上为负。

2D功能函数   属性的一个属性值;

 2D位移 translate()   transform属性的属性值;

向右,向下正值;  向左,向上是负值;

 translate  将元素向指定的方向移动

1. 水平移动：向右移动translate(x,0)和向左移动translate(-x,0)；

2. 垂直移动：向上移动translate(0,-y)和向下移动translate(0,y);

3. 对角移动：右下角移动translate(x,y)、右上角移动translate(x,-y)、左上角移动translate(-x,-y)和左下角移动translate(-x,y)。

4. X轴移动：transform:translateX() ， Y轴移动transform:translateY();

5. transform:translate(x)一个值只代表X轴。

2D缩放scale()   transform属性的属性值;

1. 让元素根据中心原点对元素进行缩放。默认的值1(不放大,不缩小)。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

2. 只有一个值时，其第二个值默认与第一个值相等。例如，scale(2)让元素沿X轴和Y轴放大两倍。

3. scaleX()：相当于scale(X,1)。表示元素只在X轴（水平方向）缩放元素.

4. scaleY()：相当于scale(1,Y)。表示元素只在Y轴（纵横方向）缩放元素.

5. transform：scale（一个值）同时代表X轴与Y轴

 2D旋转  rotate()   transform属性的属性值;  单位deg

1. 旋转rotate()函数通过角度参数对元素根据对象原点(默认center center)指定一个2D旋转。
2. 角度为正值，元素相对原点中心顺时针旋转；角度为负值，元素相对原点中心逆时针旋转。
3. rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转.
4. rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转.
5. rotate()方法，只能给一个值，不能给两个值，给两个值语法报错。

          2D倾斜  skew()  transform属性的属性值;  单位deg            [skju  倾斜]

1. 倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
2. 一个参数时：表示水平方向的倾斜角度；
3. 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度.

变形原点(只对rotate、scale、skew有效)

1. transform-origin(该属性加在触发条件之前)
2. transform-origin是变形原点，也就是元素围绕着那个点变形,旋转或倾斜，该属性只有在设置了transform属性的时候起作用；
3. 元素默认变形原点就是其中心位置(center center).
4. 在没有使用transform-origin改变元素原点位置的情况下，transform进行的rotate,scale,skew等操作都是以元素自己中心位置进行变化的。

5. transform-origin属性要加在:hover之前。

2D转换的综合写法  

{transform:translate(X,Y)  rotate(valuedeg)  scale(X,Y) skew(Xdeg,Ydeg);}

1. 属性值之间空格隔开;
2. 旋转会改变坐标轴方向;
3. 有其他属性值是,应将位移放在最前面;

---

3D

特点:近大远小,物体后面遮挡住看不见;

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

x轴,右边为正值,左边负值;

y轴,下面为正值,上边负值;

z轴,向外为正值,向内负值;

3D

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

• translate3d(tx,ty,tz)

  • ty：代表纵向坐标位移向量的长度；

  • tx：代表横向坐标位移向量的长度；

  • tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

    注：translate3d(必须写3个值,没有写0)

• translateZ(t)

  • 指的是Z轴的向量位移长度。(向外为正值,向内为负值)

3D旋转      单位deg

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

• rotateX(a)

  • rotateX()函数指定一个元素围绕X轴旋转; 旋转的角度值,如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。

• rotateY(a)

  • rotateY()函数指定一个元素围绕Y轴旋转，旋转的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。

• rotateZ(a)

  • rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转

• rotate3d(x,y,z,a)(前三个值建议取值0或1)    矢量

  • x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

  • y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

  • z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

  • a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3D缩放

• scaleZ(s)

  • s：指定元素每个点在Z轴的缩放比例。

• scale3d()

  • sx：横向缩放比例；

  • sy：纵向缩放比例；

  • sz：Z轴缩放比例；

• 注：scaleZ()和scale3d()函数单独使用时没有任何效果，这两个方法需要写在transform属性值位置 为其它属性值的前边，需要配合其他的变形函数一起使用才会有效果

景深  (透视/视距)  perspective

设置元素被查看位置的视图：

perspective 属性定义 3D 元素距视图的距离，以像素为单位。该属性允许改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示: 与 perspective-origin 属性一同使用该属性，可以改变 3D 元素的底部位置

近大远小,程序中实现的方法 perspective ,(物体和眼睛的距离越小，看到的物体越大 ,近大远小的效果越明显）
perspective: 1200px;（通常的数值在900-1200之间,添加给父元素）

子元素要想有透视效果,给父元素添加perspective属性;

perspective-origin (添加在父元素上)

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。观察3d元素的（位置）角度.

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

perspective-origin: x-axis y-axis;

perspective-origin：center center;（中心）
perspective-origin：left top;   （左上角）
perspective-origin：100% 100%; （右下角）

实现3D场景

transform-style属性(添加在父元素上的)

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d
​
flat值为默认值，表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。 

控制子元素是否3D呈现, 属性写到父元素上,控制的是子元素

---

动画  animation

animation vs transition

• 相同点：都是随着时间改变元素的css属性值。

• 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性值； 而animation在不需要触发任何事件的情况下也可以随着时间去改变元素css的属性值。

制作动画分两步:

1. 定义动画; 用关键帧 @keyframes  动画名{  }
2. 调用动画; animation: 动画名;

1.关键帧的定义

@keyframes 动画名{
from{初始状态属性}
to{结束状态属性}
}

或

@keyframes 动画名{
 0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}

2.调用动画

• animation-name

  • 设置的动画名称

  • 必须与规则@keyframes配合使用， 例如:@keyframes mymove{}   animation-name:mymove;

• animation-duration                                                                                                                                                                                                                                                                              

  • 设置动画的持续时间

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

• animation-timing-function

  • 设置动画的过渡类型

  • 属性值

    • linear：线性过渡(匀速)。

    • ease：平滑过渡。

    • ease-in：由慢到快。

    • ease-out：由快到慢。

    • ease-in-out：由慢到快再到慢。

    • step-start:马上跳到动画每一结束桢的状态

• animation-delay

  • 设置动画延迟的时间(何时开始)

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

• animation-iteration-count

  • 设置动画的循环次数

  • 属性值

    • animation-iteration-count: infinite | number;

    • infinite,无限循环

    • 数值, 循环的次数

• animation-direction

  • 设置动画在循环中是否反向运动

  • 属性值

    • normal,正常方向

    • reverse,反方向运行

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

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

• animation-play-state (简写不包括)

  • 设置动画正在运行还是暂停

  • 属性值

    • animation-play-state:running | paused;

    • running:运动

    • paused: 暂停

    • 通常和:hover配合使用,  animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

• animation-fill-mode 

• 设置动画在播放之前或之后，其动画效果是否可见。

• none	不改变默认行为。
  forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  both	向前和向后填充模式都被应用。

annimation 简写