transition过渡动画

基本语法

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

示例：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
div{
width:100px;
height:100px;
background:red;
transition:all2sease1s;
}
div:hover{
width:1000px;
height:500px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</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 | %
功能
设置被转换元素的基点位置。

示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
#div{
width:500px;
height:500px;
border:1pxsolidred;
margin:0auto;
position:relative;
perspective:700px;
perspective-origin:00;
}
#div1:hover{
transform:rotateX(60deg);
}
#div1{
width:300px;
height:300px;
background:red;
position:absolute;
top:100px;
left:100px;
transform-origin:top;
transition:all1sease;
}
</style>
</head>
<body>
<divid="div">
<divid="div1"></div>
</div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</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 转换元素定义透视视图。