css3边框
boder-radius
两个参数：左上右下， 右上左下（具体数值就是远的半径）
四个参数：左上 右上 右下 左下 （顺时针）
box-shadow
参数：水平距离 垂直距离 模糊边框 模糊半径 颜色 是否在边界内部（inset/默认为outset）
css3背景
background-size：背景大小
background-size : contain;
background-size : cover;
background-size : 100% 100%;
background-orgin : 背景位置
background-orgin : border-box;
background-orgin : padding-box;
background-orgin : content-box;
这里我都给了padding值，比较一下，可以得出：
值为border-box时，border在content中；
值为content-box时，padding在content中；
值为padding-box时，padding在border和content中间。
css3变形
transform：
translate( ) 位移移动
transform的translate位移操作
跟相对定位类似，不脱离文档流，而且也不影响其他元素的位置
translate位移
两个参数 : x , y, z
translateX() translateY() translateZ();
css
.stage {
width: 300px;
height: 300px;
margin: 20px;
float: left;
position:relative;
background: url(img/bg.jpg);
perspective: 800px;
/*视距, perspective 给要变形元素的父元素加上这个属性
* 眼睛跟屏幕的距离*/这里给s2 img2 在z轴上移动了400px，所以给一个800px的视距能有一个远近的效果
}
.stage .container{
position: absolute;
left: 50%;
top:50%;
margin-left: -35px;
margin-top: -50px;
}
.stage .container img{
position: absolute;
left:0px;
top:0px;
}
.stage .container img:nth-child(1){
opacity: 0.5;
}
.s1 .container img:nth-child(2){
transform: translate(100px,100px);
/*transform: translateY(-100px);*/
/*transform: translateX(-100px);*/
}
.s2 .container img:nth-child(2){
transform: translateZ(400px); /*视距感觉图片变大*/
/*transform: translateZ(-400px);*//*视距感觉图片变小*/
}
html
<div class="stage s1">
<div class="container">
<img src="img/cardKingClub.png" width="70" height="100" />
<img src="img/cardKingClub.png" width="70" height="100" />
</div></div>
<div class="stage s2">
<div class="container">
<img src="img/cardKingClub.png" width="70" height="100" />
<img src="img/cardKingClub.png" width="70" height="100" />
</div></div>
scale( ) 大小缩放
这个原理和背景图片大小是一样的，比较好理解。
rotate( ) 旋转
transform: rotateX(40deg);
transform: rotateY(-40deg);
补充：
(1)如果rotate 中值是正数 就是 顺时针 旋转度数 ， 如果是负数就是逆时针旋转度数
(2)如果 rotate(45deg) === rotateZ(45deg)
(3)rotate3d(0,1,1,30deg) 标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。
(4)默认以中心点旋转，transform-origin : 水平 垂直; 这样设置参照的中心点
skew( ) 倾斜
这玩意，没怎么见过，就动手试了一下 ：）
transform: skewX(30deg);
transform: skewY(-30deg);
transform: skew(30deg,30deg);
补：
perspective 视距 景深
perspective-origin 属性指定了观察者关注的位置
transform-style (preserve-3d) 建立3D空间
backface-visibility 隐藏背面
css3过渡
transition：
参数：属性 持续时间 延迟时间 运动形式
拆分写为：
transition-property
transition-duration
transition-delay负数的是提前执行
transition-timing-function(linear, ease, ease-in, ease-out，ease-in-out) 加速度的形式
对应的事件：
<div id="div1">
<div id="div2"></div></div>
<script>
var oDiv2 = document.getElementById(‘div2‘);oDiv2.addEventListener(‘transitionend‘, function(ev) {
console.log(ev);
if(ev.propertyName =="transform"){
oDiv2.style.background = "yellow";
}
}, false);//transitionend : 当css3过渡时间结束的时候，就触发这个事件
</script>
css3动画
animation
animation-direction 运动执行的方式
animation-play-state 运动执行状态 pasted 和 running
animation-fill-mode
forwards 当动画完成以后，保持最后一个属性
backwards 动画显示之前，应用该属性
@keyframes 有三种写法 1.from to 2个关键字
2.10% 50% 100% 多个百分比值来执行固定时间的动画
3.animation: steps() 针对整合好的spirt图通过固定频率形成动画
对应的事件：
<div id="div1"></div>
<script>
var oDiv = document.getElementById(‘div1‘);oDiv.addEventListener(‘animationstart‘, function() {
console.log("动画开始");
}, false);
oDiv.addEventListener(‘animationend‘, function() {
console.log("动画结束");
}, false);
oDiv.addEventListener(‘animationiteration‘, function(ev) {
console.log(ev.elapsedTime); //总时间（每一次时间的累加和）
}, false);//animationstart : 当css3的animation开始的时候触发的事件
//animationend : 当css3的animation结束的时候触发的事件
//animationiteration : 当css3的animation多次的时候触发的事件（每走一次就触发一下） 总次数 是 n-1 ， n 是动画执行的次数
</script>
动画实例：
不会gif，先用静态的代替一下--
html
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
li {
list-style: none;
}
li {
width: 5px;
height: 30px;
background: green;
float: left;
margin-right: 5px;
animation: runLine 2s infinite linear;
}
@keyframes runLine{
0%{
transform: scaleY)(1);
}
50%{
transform: scaleY(0.5);
}
100%{
transform: scaleY(1);
}
}
ul li:nth-of-type(1){
animation-delay: 0;
}
ul li:nth-of-type(2){
animation-delay: -.2s;
}
ul li:nth-of-type(3){
animation-delay: -.4s;
}
ul li:nth-of-type(4){
animation-delay: -.6s;
}
ul li:nth-of-type(5){
animation-delay: -.8s;
}
ul li:nth-of-type(6){
animation-delay: -1s;
}
html
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
最后放rotate坐标轴和skew坐标轴、还有transition的运动形式吧。
