1转换
2D转换
二维平面移动
语法：
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离，垂直移动距离)
可以设置负值，水平的正值是向右移动，垂直的正值是向下移动
二维平面旋转
语法：
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
3D转换
透视点
在所看元素的父元素或者是祖先元素上设置透视点
语法:perspective: 1000px;
三维立体的移动
语法：
transform: translateZ(200px);
transform: translate3d(水平移动,垂直移动,z轴移动);
z轴：z轴垂直于屏幕，方向是射向我们。
三维立体的旋转
语法：
/*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）这个坐标的向量，用这个向量作为轴进行旋转。
缩放
语法：
transform:scale(整体放大的倍数)
Transform:scale(水平缩放的倍数，垂直缩放的倍数)
倾斜
语法：transform: skew(15deg,0deg);
小技巧：如果先要文字板正，那么反倾斜即可
案例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #d1{
8 width: 300px;
9 height: 300px;
10 background: green;
11 margin: 0 auto;
12
13 /*倾斜*/
14 transform: skew(15deg,0deg);
15 }
16
17 h1{
18 transform: skew(-15deg,0deg);
19 }
20 </style>
21 </head>
22 <body>
23 <div id="d1">
24 <h1>helloworld</h1>
25 </div>
26 </body>
27 </html>
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;
4 弹性布局
弹性容器：
元素上设置了display:flex;的元素就是弹性容器
弹性子元素：
元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。
语法：display:flex;
主轴分布的设置：
justify-content:(前缀)
flex-start
flex-end
center
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布，间距一样
侧轴分布的设置：
align-items:（前缀）
stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
flex-start
flex-end
center
换行
语法：flex-warp:warp
多行分布的设置：
align-content:（前缀）
flex-start
flex-end
center
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布，间距一样
剩余空间的占据：
Flex:数字；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <style type="text/css">
7 .parent{
8 width: 100%;
9 height: 800px;
10 margin: 0 auto;
11 border: 1px solid #000;
12
13
14 /*设置弹性容器*/
15 display: flex;
16
17 }
18
19 .db{
20 flex: 1;
21 background: yellow;
22 }
23 .c1{
24 /*占据剩余空间的1份*/
25 flex: 2;
26 background: green;
27 }
28
29 .c2{
30 background: purple;
31 width: 100px;
32 }
33
34
35 </style>
36 </head>
37 <body>
38 <div class="parent">
39 <!--db占据剩余空间3份中的1份-->
40 <div class="db"></div>
41 <!--c1是主要内容，占据剩余剩余空间3份中的2份-->
42 <div class="child c1"></div>
43 <!--假设c2是广告位，占100px宽度-->
44 <div class="child c2"></div>
45
46 </div>
47 </body>
48 </html>
对弹性子元素进行排序
order:数字
根据order的数字，进行从小到大排序
5 响应式
移动端：手机/平板/智能电视/智能手表/VR设备/AR设置
视窗viewport（用于移动端，meta语句对于PC端无效）
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />width=device-width ：width等于设备的系统显示宽度
initial-scale=1 ：后面4个最终决定不允许任何的缩放。
minimum-scale=1
maximum-scale=1
user-scalable=no
一套设计稿解决手机端的屏幕大小不一致问题
<meta name="viewport" content="width=750,user-scalable=no" />
注意：meta对PC端不起作用
响应式：
不同的屏幕的大小，显示不一样的内容。
手机端：背景蓝色
手机的显示分辨率：一般小于640px
平板：深蓝色
平板的分辨率：一般是大于640px，小于960px
Pc：黑色
1 <head>
2 <meta charset="UTF-8">
3 <title>响应式</title>
4 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
5 <style type="text/css">
6 .d1{
7 width: 500px;
8 height: 300px;
9 background: skyblue;
10 margin: 100px auto;
11 }
12
13 /*媒体查询*/
14 /*小于等于640px的分辨率*/
15 @media only screen and (max-width: 640px) {
16 .d1{
17 background: mediumvioletred;
18 }
19 }
20
21 /*范围在640px-960px之间*/
22 @media only screen and (min-width: 640px) and (max-width: 960px) {
23 .d1{
24 background: green;
25 }
26 }
27
28
29
30 </style>
31 </head>
32 <body>
33 <div class="d1">
34
35 </div>
36 </body>
来源：oschina
链接：https://my.oschina.net/u/4256408/blog/3520394