css3的transform属性

translate移动

1、2d的移动
2、3d的移动
3、使用 translate 移动的优点：不会影响其它盒子，但是对行内元素不起作用

// 常用知识点
// transform: translate(50%, 50%);   百分比是相对与自身的
// 设置盒子水平居中，垂直居中
<style>
	.father {
		position: relative;
	}
	.child {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(50%, 50%);
	}
</style>

// 2dtranslate移动的方法
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

// 3d translate移动的方法
transform: translate(x, y, z);
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);

rotate旋转

1、单位是 deg
2、如果度数为正，那么就是顺时针方向旋转
3、如果度数为负，那么就是逆时针方向旋转
4、坐标轴也会跟着旋转
5、旋转法则：左手法则：大拇指指向旋转轴的正方向，其余四指自然弯曲，四指弯曲的方向就是正度数的旋转方向。

// 设置旋转点，默认是50%，50%（元素的中心）
// transform-origin的值可取方位词：(top, bottom, left, right, center),也可以取像素值
transform-origin: x, y;	    // 旋转中心点
// 2d 旋转
transform: rotate(angle);  
// 3d 旋转
transform: rotate3d(x,y,z,angle);   // 绕自定义轴进行旋转
transform: rotateX(angle);  // 定义沿着x轴进行的3d旋转
transform: rotateY(angle);  // 定义沿着y轴进行的3d旋转
transform: rotateZ(angle);  // 定义沿着z轴进行的3d旋转

scale缩放

可设置中心缩放点，默认为元素中心点，缩放后不影响其它

// x, y 代表缩放倍数，如果只有一个参数则代表按比例缩放
transform: scale(x, y);

// 写一个0.5px的直线，可以利用缩放写
div {
	width: 1px;
	transform: scale(0.5);
}

animation动画

如果有多个动画函数作用在一个元素上，使用，分隔开。
eg： div {
ainimation: move 3s, slide 4s,
}

// 第一步：先定义一个动画函数
@keyframes 动画函数名称{
	0% {}
	25% {}
	50% {}
	75% {}
	100%{}
}
// 第二步：元素使用动画
div {
	// 动画函数名称
	animation-name: move,
	// 动画指定多少m或者毫秒完成
	animation-duration: 2s,
	// 动画指定以什么速度完成一个周期：linear(匀速)
	animation-timing-function: linear,
	// 设置动画在启动前的时间间隔
	animation-delay: 2s,
	// 定义动画播放的次数，可以是无数次（infinite）, 也可以填写具体的数字
	animation-iteration-count: infinite,
	// 定义动画在一个周期之后是继续播放还是反向播放，normal（默认正常播放）, reverse（反向播放）
	animation-direction: normal,
	// 设置动画结束时的状态（forwards 保持，backwards 起始）
	animation-fill-mode: forwards,
	// 规定动画是否停止,paused 表示停止，running表示运行
	animation-play-state: paused
}
// animation的整体写法
animation: 动画名称 动画一个周期所需时间 动画运行的速度 动画开始前的延时 播放次数 一个周期完成后是否反方向运行 动画结束时的状态

3d

// 如果子盒子是3d 状态，要给父盒子添加透视
perspective: 500px,
// 如果子盒子是3d 状态，要给父盒子开启3d模式
transform-style: preserve-3d