1.装换transform
1.1二维平面移动
语法：
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离，垂直移动距离)
可以设置负值，水平的正值是向右移动，垂直的正值是向下移动
1.2二维平面旋转
语法：
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
1.3 3D转换透视点
在所看元素的父元素或者是祖先元素上设置透视点
语法:perspective: 1000px;
1.4三维立体的移动
语法：
transform: translateZ(200px);
transform: translate3d(水平移动,垂直移动,z轴移动);
z轴：z轴垂直于屏幕，方向是射向我们。
1.5三维立体的旋转
语法：
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,30deg);
解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。
1.6缩放
语法：
transform:scale(整体放大的倍数)
Transform:scale(水平缩放的倍数，垂直缩放的倍数)
1.7倾斜
语法：transform: skew(15deg,0deg);
小技巧：如果先要文字板正，那么反倾斜即可
2.Transition过渡
综合设置：
transition: all 2s;
分别设置：
/*过渡效果*/
/*transition:height 2s,transform 3s,background 2s;*/
/*transition: all 2s linear;*/
/*过渡的属性*/
transition-property: all;
/*过渡所消耗的时间*/
transition-duration: 2s;
/*过渡变化的速度
linear线性速度
ease/ease-in/ease-out
cubic-bezier(0.57,-0.34, 0.37, 1.44)
* */
transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44);
/*过渡的延迟时间*/
/*transition-delay: 2s;*/
3.Animation 动画
综合设置语法：animation: donghua 4s infinite;
分别设置：
/*动画*/
/*animation: donghua 5s;*/
/*动画的名称*/
animation-name: donghua;
/*一次动画所花费的时间*/
animation-duration: 3s;
/*动画的速度*/
animation-timing-function: linear;
/*动画延迟时间*/
animation-delay: 3s;
/*设置动画的次数*/
animation-iteration-count: 3;
/*设置动画的往返*/
animation-direction: alternate;
/*保留最后一刻状态*/
animation-fill-mode: forwards;
不同状态写在关键帧里
@keyframes donghua{
0%{
transform: translate(0,0);
}
50%{
transform: translate(500px,0);
}
100%{
transform: translate(500px,500px);
}
}
1.4弹性布局
弹性容器：
元素上设置了display:flex;的元素就是弹性容器
弹性子元素：
元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。
语法：display:flex;
主轴分布的设置：
justify-content:
flex-start
flex-end
center
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布，间距一样
侧轴分布的设置：
stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
flex-start
flex-end
center
换行：
语法：flex-warp:warp
多行分布的设置：
align-content:
flex-start
flex-end
center
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布，间距一样
剩余空间的占据：
语法：Flex:数字；
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .parent{ width: 100%; height: 800px; margin: 0 auto; border: 1px solid #000; /*设置弹性容器*/ display: flex; } .db{ flex: 1; background: yellow; } .c1{ /*占据剩余空间的1份*/ flex: 2; background: green; } .c2{ background: purple; width: 100px; } </style> </head> <body> <div class="parent"> <!--db占据剩余空间3份中的1份--> <div class="db"></div> <!--c1是主要内容，占据剩余剩余空间3份中的2份--> <div class="child c1"></div> <!--假设c2是广告位，占100px宽度--> <div class="child c2"></div> </div> </body> </html>
对弹性子元素进行排序：
语法：order:数字
根据order的数字，进行从小到大排序