css 笔记513D左手坐标系(普通的坐标系)伸出左手,让拇指和食指成L形状,大拇指向右,食指向上,中指指向前方,拇指食

1 3D

左手坐标系(普通的坐标系)
伸出左手,让拇指和食指成L形状,大拇指向右,食指向上,中指指向前方,拇指食指中指分别代表XYZ的正方向
css3 3D坐标系
X左负右正
y上负下正
z外正内负
透视可以让我们有3D的效果
perspective 对父亲设置
perspective:1000px;
x y轴可以用px也可以用% z轴只能用px
backface-visibility:hidden; 背面朝向我们的时候隐藏不是正面对向屏幕隐藏

定义动画
@keyfromes 动画名

@keyframes run{
	from{
	transform: translateX(0);
	}
	to{
	transform: translateX(500px);
	}
	}
	/*ease 默认 动画以低速开始 然后加快 在结束前变慢*/
	/*动画名称 动画时间 运动曲线 0s是立刻开始 播放次数 是否反方向*/
	animation: run 4s ease 0s infinite alternate;

@keyframes run{
	0%{
	transform: translate3d(0,0,0);
	}
	25%{
	transform: translate3d(600px,0,0);
	}
	50%{
	transform: translate3d(600px,400px,0);
	}
	75%{
	transform: translate3d(600px,500px,0);
	}
	100%{
	transform: translate3d(0,0,0);
	}
	}

无缝滚动
利用transform

/*运动状态:暂停*/
animation-play-state: paused;

伸缩布局
传统布局百分比布局
display:flex;父盒子添加意思是伸缩布局模式
flex:1;意思是占一份
flex-direction:row-reverse;调整行的排列方式
flex-direction:column;垂直方向的排列方式
flex-direction 调整主轴方向的
row默认水平方向从左到右
justify-content 调整内容在主轴的对齐方式

justify-content: flex-start; 默认值表示让子元素从父容器的开头开始排序

justify-content: flex-end; 表示让子元素从父容器的后面开始排序但盒子顺序不变

justify-content: center; 表示让子元素在父容器中间显示

justify-content: space-between; 左右盒子贴近父盒子中间的均分空白间距

justify-content: space-around; 相当于给每个盒子添加左右margin

align-items 调整侧轴对齐（垂直对齐）对一行的情况排列 align-items: stretch; /默认子元素高度会拉伸适应父容器（子元素没有设置高度前提下）/

align-items: center; /*垂直居中*/
align-items: flex-start;/*上对齐*/
align-items: flex-end;/*下对齐*/ 
flex-wrap 控制是否换行
flex-wrap: nowrap; 默认值 项目不拆行不拆列 收缩显示 一行内显示
flex-wrap: wrap; 项目必要时候拆行或拆列
flex-wrap: wrap-reverse;  项目必要时候拆行或拆列，但是相反的顺序
flex-flow flex-direction和flex-wrap的简写
flex-flow:flex-direction  flex-wrap排列方向     换不换行

order 控制子元素的排列顺序
order值越小越排在前面值可以为负数默认值为0

align-content 必须父元素设置
display: flex flex-direction: row flex-wrap: wrap
其值可以设置
stretch center flex-start flex-end space-between space-around