transition过度动画

基本语法
transition:样式名 时间 动画类型 延时;
参数
样式名：为all时，代表规定的所有样式一起发生改变。
时间：指完成动画的时间。以秒为单位
动画类型：动画的过渡效果。如：
linear，规定以相同速度开始至结束的过渡效果。
ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。
延时：规定多少时间后执行动画。以秒为单位，可以省略此参数。
功能
用于设置元素的过渡效果。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.   div{
  7.       width:100px;
  8.       height:100px;
  9.       background:red;
  10.       transition:all 2s ease 1s;
  11.   }
  13.   div:hover{
  14.       width:1000px;
  15.       height:500px;
  16.   }
  17. </style>
  18. </head>
  19. <body>
  21. <div></div>
  23. <p>鼠标移动到 div 元素上，查看过渡效果。</p>
  25. </body>
  26. </html>

image.png
代码讲解
1、设置标签开始样式并添加过渡动画
div{
width:100px;
height:100px;
background:red;
transition:all 2s ease 1s;
}
width:100px; 设置div宽为100像素
height:100px; 设置div高为100像素
background:red; 设置div宽为背景色为红色
transition:all 2s ease 1s; 设置div完成过渡动画的时间为2秒且1秒后执行
2、设置标签过渡后的样式
div:hover{
width:1000px;
height:500px;
}
width:1000px; 设置鼠标移入div上方后宽度为1000像素
height:500px; 设置鼠标移入div上方后高度为500像素

3D动画

1.transform

基本语法
transform:转换方法();
功能
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

2.perspective

基本语法
perspective: number | none;
值
number元素距离视图的距离，以像素计。
功能
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

3.perspective-origin

基本语法
perspective-origin：x轴上的位置 y轴上的位置;
值
left | center | right| length | %
功能
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

4.transform-origin

基本语法
transform-origin: x轴上的位置 y轴上的位置 轴上的位置;
值
left | center | right| length | %
功能
设置被转换元素的基点位置。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.   #div{
  7.       width:500px;
  8.       height:500px;
  9.       border:1px solid red;
  10.       margin:0 auto;
  11.       position:relative;
  12.       perspective:700px;
  13.       perspective-origin:0 0;
  14.   }
  16.   #div1:hover{
  17.       transform:rotateX(60deg);
  18.   }
  19.   #div1{
  20.     width:300px;
  21.     height:300px;
  22.     background:red;
  23.     position:absolute;
  24.     top:100px;
  25.     left:100px;
  26.     transform-origin:top;
  27.     transition:all 1s ease; 
  28.   }
  29. </style>
  30. </head>
  31. <body>
  33. <div id="div">
  34. <div id="div1"></div>
  35. </div>
  37. <p>鼠标移动到 div 元素上，查看过渡效果。</p>
  39. </body>
  40. </html>

image.png
代码讲解
1、设置低级元素样式
#div{
width:500px;
height:500px;
border:1px solid red;
margin:0 auto;
position:relative;
perspective:700px;
perspective-origin:0 0;
}
perspective:700px; 设置透视距离为700像素
perspective-origin:0 0; 设置透视位置0
2、设置子级元素样式
#div1{
width:300px;
height:300px;
background:red;
position:absolute;
top:100px;
left:100px;
transform-origin:top;
transition:all 1s ease;
}
transform-origin:top; 设置子元素转换基点为顶部
transition:all 1s ease; 子元素添加过渡动画
3、设置子级元素过渡后的样式
#div1:hover{
transform:rotateX(60deg);
}
transform:rotateX(60deg); x轴旋转60度


transform应用于元素的2D或3D转换方法

值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。