css基础知识(变形/过渡/动画)

一、旋转

1、旋转

/* 最小宽度 */
	min-width: 200px;
	rotate: hover .fill{
	transition: 0.3s;/* 过渡时间 */
	transform: rotate(45deg);/* 围绕z轴旋转 */
	transform: rotateX(45deg);/* 围绕x轴旋转 收缩的现象 */
	transform: translateY(45deg);/* 围绕y轴旋转 */
	}

2、缩放scale

transform: scale(2,2);/* 扩张比例xy轴 */
transform: scaleX(2);/* 扩张比例x轴 */
transform: scaleY(2);/* 扩张比例y轴 */

3、斜切

transform: skewX(45deg);
transform: skewY(45deg);
transform: skew(45deg,45deg);/*变没了*/

4、移动：单位像素

transform: translateX(100px);
transform: translateY()(100px);/*负方向*/
transform: translate(100px,100px);/*45度角，右下移动*/

5、变换基点设置（修改轴）orgin

transform-origin: 100% 0 0 ;/* xyz 右上角为旋转中心 */

二、过渡 transition

transition: width 1s cubic-bezier(x1, y1, x2, y2) 1s/*(延迟)*/;
linear:匀速
ease-in:加速
ease-in-out:先加后减
cubic-bezier(x1, y1, x2, y2):三次贝塞尔曲线可以定制,xy取值0-1

三、动画

.cls1{
	width: 100px;
	height: 100px;
	background-color: red;
	position: relative;
	animation:move 4s;/* 也可以分开写 */
}
@-ms-keyframes move{
	% / from{
		left: 0px;
	}
	% / to{
		left: 900px;
	}
}