渐变、过渡、2d、3d转换、动画

渐变

1.线性渐变
	background:linear-gradient(角度,颜色1,颜色2,...);
	角度：
		to right由左向右
		to bottom由上向下
		30deg渐变的方向与垂直方向的夹角为30°
2.径向渐变
	background:radial-gradient(颜色1,颜色2,...)
3.重复线型渐变
	background:repeating-linear-gradient(颜色1 0%,颜色2 20%,...);
4.重复径向渐变
	background:repeating-radial-gradient(颜色1 0%,颜色2 20%,...)

过渡

- 过渡就是元素从一个状态到另一个状态平滑的变换过程
- transition:过渡属性  过渡所需时间  速度效果  延迟时间;
- 过渡添加的位置：	
	1.给元素本身添加，移入移出都有过渡
	2.给hover添加，只有移入有过渡
- 速度效果
	匀速linear
	先慢后快ease-in
	先快后慢ease-out
	由慢变快后变慢ease-in-out
	默认值,慢速开始慢速结束ease
- 多属性,不同的过渡效果
	transition: width 2s linear,background 3s ease-in 0.3s;
- 多属性,相同的过渡效果
	transition: all 2s linear;

2d转换

1.位移
	transform:translate(100px);水平方向位移
	transform:translate(100px,200px);水平和垂直方向位移
	transform:translateX(100px);水平方向位移
	transform:translateY(100px);垂直方向位移
1.1***元素居中办法
	父元素{
		position: relative;
	}
	子元素{
		position: absolute;
		top: 50%;
		left: 50%;父元素的50%
		transform: translate(-50%,-50%);子元素的50%
	}

2.旋转
	transform:rotate(30deg);正值为顺时针
2.1转换中心
	transform-origin:0 0 ;坐标点
	transform-origin:right bottom ;右下角
	transform-origin:50% 50% ;百分比
2.2思考：既有位移又有旋转？
	transform:translate() rotate() ;

3.缩放
	transform:scale(2);水平垂直都缩放
	transform:scale(2,0.5);水平放大为2倍,垂直缩小为0.5
	transform:scaleX(2);水平缩放
	transform:scaleY(2);垂直缩放

4.倾斜
	transform:skew(30deg);沿x轴倾斜
	transform:skewX(30deg);沿x轴倾斜
	transform:skewY(30deg);沿y轴倾斜

3d转换

景深perspective:3000px;给父元素
***子元素保留3d转换位置transform-style:preserve-3d;给父元素

1.位移
	transform:translateZ(200px);z轴的位移
	transform:translate3d(200px,100px,50px);xyz轴
2.旋转
	transform:rotateX();x轴旋转
	transform:rotateY();y轴旋转
	transform:rotateZ();z轴旋转(就是2d的顺逆时针)
	transform:rotate3d(x,y,z,30deg);
	transform:rotate3d(1,0,0,30deg);x轴旋转
3.缩放
	transform:scaleZ(2);
	transform:scale3d(2,1,0.5);

动画

动画可以指定多个状态,不仅可以鼠标事件触发，也可以打开浏览器就触发
1.定义动画
	@keyframes 动画名称{
		定义关键帧,百分比指的是时间
		0%/from{
			background:red;
		}
		50%{
			background:green;
		}
		100%/to{
			background:yellow;
		}
	}

2.执行动画
	animation:动画名称  执行时间   速度效果   延迟时间  执行次数  是否反向;
		- 执行次数：无限infinite
		- 反向:alternate
	- 写在元素上：浏览器打开就触发
	- 写在hover里：鼠标移入才触发

3.animation-fill-mode规定动画在播放之前或之后，其动画效果是否可见
	backwords延迟时间段内,元素可以保持在第一帧的状态
	forwards 动画执行结束后保持在最后一帧
	both延迟时间内和动画执行结束后分别保持在第一帧和最后一帧
4.动画暂停
	animation-play-state:paused;

元素背面不可见

backface-visibility:hidden;