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>
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
