过渡3D动画属性

过渡属性

过渡:transition

​ 我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡 效果的触发，会立即生硬的执行触发。

transition 包括以下属性：

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

• transition-duration: 1s; 过渡的持续时间。

• transition-timing-function: linear; 运动曲线。属性值可以是：

  • linear 线性

    transition: all 2s linear 0s;
    

  • ease 减速

  • transition: all 2s `ease` 0s;
    

  • ease-in 加速

    transition: all 2s `ease-in` 0s;
    

  • ease-out 减速

    transition: all 2s `ease-out` 0s;
    

  • ease-in-out 先加速后减速

    transition: all 2s `ease-in-out` 0s;
    

• transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

	transition: all 3s linear 0s;

单一过渡长度

transition: width 2s linear 0s;

过渡所有属性all

	transition: all 2s linear 0s;

---

2D转换

CSS 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。包括：缩放，移动，旋转，倾斜

缩放 scale

transform: scale(1); 
transform: scale(1.5);//放大了1.5倍 

transform: scale(2, 0.5); //下图  x轴放大两倍  y轴缩小0.5倍数

位移 translate

	transform: translate(水平位移, 垂直位移);

	transform: translate(-50%, -50%);
	-transform: translateX(200px); 
	-transform: translateY(200px);
	-transform: translate(200px,200px); //x y轴

旋转 rotate

	transform: rotate(角度);

	transform: rotate(45deg); //正值 顺时针；负值：逆时针。

改变旋转的坐标原点可用:transform-origin属性 原点默认居中。格式如下：

transform-origin: 水平坐标 垂直坐标;

	transform-origin: 50px 50px;

	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点

倾斜 skew

 transform: skew(0); //开始为0
 //下面是各个倾斜结束效果
 -transform: skewX(60deg);
-transform: skewY(60deg);
-transform: skew(45deg,45deg);

取值：
1.skewX (xdeg)
让元素向着x轴的方向产生倾斜效果，实际上改变的是y轴的倾斜角度值
x：取值为正，y轴逆时针倾斜
x：取值为负，y轴顺时针倾斜
2.skewY (ydeg)
让元素向着y轴的方向产生倾斜效果，实际上改变的x轴的倾斜角度值
y:取值为正，x轴顺时针倾斜
y:取值为负，x轴逆时针倾斜
3.skew(x)
等同于skewX(xdeg)
4.skew(x,y)

---

3D转换

如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。

旋转

	transform: rotateX(360deg);    //绕 X 轴旋转360度

	transform: rotateY(360deg);    //绕 Y 轴旋转360度

	transform: rotateZ(360deg);    //绕 Z 轴旋转360度

 perspective: 110px;
 /* 透视 :加给变换的父盒子*/
            /* 设置的是用户的眼睛距离 平面的距离*/
            /* 透视效果只是视觉上的呈现，并不是正真的3d*/
/*透视的是要加给图片的父元素 div，方能生效。*/

移动：translateX、translateY、translateZ

transform: translateX(100px);    //沿着 X 轴移动 右边移动

	transform: translateY(360px);    //沿着 Y 轴移动 下移动

	transform: translateZ(360px);    //沿着 Z 轴移动 等于放大

透视：格式有两种写法：

• 作为一个属性，设置给父元素，作用于所有3D转换的子元素

• 作为 transform 属性的一个值，做用于元素自身。

perspective: 500px;

3D呈现（transform-style）

让元素变成真正的3D

transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */

	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */

---

动画属性

 animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

steps()的效果

	animation: move2 4s steps(2) infinite; //可以说变成了逐帧动画

反向 运动曲线 延迟执行。(infinite 表示无限次)

        animation: move1 1s  alternate linear 3;

        animation: move2 4s;

#### 	steps()的效果

```css
	animation: move2 4s steps(2) infinite; //可以说变成了逐帧动画