常用css3-持續更新-非深入
例子仅限于chrome
<div class="box"></div>.box{width:100px;transition:1s width ease;}
.box:hover{width:300px;}<style>
.box{width:100px;height:100px;background:#467B96;transition:1s width ease;}
.box:hover{width:300px;}
</style>
.box{-webkit-linear-gradient(top left,red 0%,yellow 100%)}<style>
.box1{width:100px;height:100px;background: -webkit-linear-gradient(top left,red 0%,yellow 100%) ;transition:1s width ease;}
</style>
倒影：box-reflect: above | below | left | right
box-reflect:[倒影方向] [倒影距離] [倒影透明漸變]
-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 100%);<style>
.box2{width:100px;height:100px;background:#467B96;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 100%);}
</style>
transform:rotate(0deg)
.img1{-webkit-transform: rotate(30deg);
-webkit-transition:1s ease all;}
.img1:hover{-webkit-transform: rotate(360deg); }
<style>
.img1{width:200px;-webkit-transform: rotate(30deg);
-webkit-transition:1s ease all;}.img1:hover{-webkit-transform: rotate(360deg); }
</style>
transform:rotateY(0deg)
.img2{-webkit-transform: rotate(0deg);
-webkit-transition:1s ease all;}
.img2:hover{-webkit-transform: rotateY(360deg); 
<style>
.img2{width:200px;-webkit-transform: rotate(0deg);
-webkit-transition:1s ease all;}.img2:hover{-webkit-transform: rotateY(360deg); }
</style>
顯示器中3D效果元素的透視點在顯示器上方（不是後面）perspective屬性，元素父級設置，如大小為1000px，即眼睛離顯示器的距離，子元素會有透視效果，不是元素本身
用戶元素3D空間Z平面之間的距離，其效應由其他值決定，值越小，用戶與3D空間Z平面越近，視覺效果深刻，反之越遠，視覺小
perspective: 0/none 無3D空間
perspective: 越小，3D越明顯，即眼晴越靠近真3D
perspective: 無窮大，與0/none效果一致
.p3{-webkit-perspective:400px;} //眼晴離顯示器的距離 先寫，避免bug ，值越小視覺越誇張，即視頻越遠
.img3{-webkit-transform: rotateY(0deg);transition:5s all ease; //沿Y軸轉
.img3.hover{-webkit-transform: rotateY(360deg)}
}
<style>
.p3{-webkit-perspective:400px;}
.img3{width:200px;-webkit-transform: rotateY(0deg);transition:5s all ease;}
.img3:hover{-webkit-transform: rotateY(360deg)}
</style>
transform-style: preserve-3d; 有加與無加的區別
<div1 class="wrap">
<div class="spin"> //border: 1px dashed orange;
<div class="rotate"> //border: 5px solid yellow;
<img src="../img/美女4.png" alt="" width="200" /> //border: 1px solid green;
</div>
</div>
</div1><div class="spin">
<div class="rotate">
<img src="../img/美女4.png" alt="" width="200" />
</div>
</div><style>
.wrap {
width: 300px;
height: 200px;
margin: 30px auto;
position: relative;
background-size: 100% 100%;}
/设置动画/
@keyframes spin{
0%{
transform:rotateY(0deg)
}
100%{
transform:rotateY(360deg)
}}
.spin {
width: 142px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -72px;
margin-top: -101px;
border: 1px dashed orange;
cursor: pointer;
transform-style: preserve-3d;}
/调用动画/
.spin:hover{
animation:spin 5s linear infinite;}
.rotate {
background: url(../img/美女4.png) no-repeat center;
background-size: 100% 100%;
border: 5px solid #EFDF3B;
transform: perspective(200px) rotateY(45deg);}
.rotate img{
border: 1px solid green;
transform: rotateX(15deg) translateZ(10px);
transform-origin: 0 0 40px;}
/改变transform-style的默认值/
.three-d {
transform-style: preserve-3d;}
</style>
加transform-style: preserve-3d;之後加class="rotate three-d"
<div class="spin">
<div class="rotate three-d">
<img src="../img/美女4.png" alt="" width="200" />
</div>
</div>-webkit-transform:translateX(0px);位移
<style>
.p4{-webkit-perspective:400px;}
.img4{width:200px;-webkit-transform: translateX(0);transition:3s all ease;}
.img4:hover{-webkit-transform: translateX(200px)}
</style>
-webkit-transform: translateY(0)類似
-webkit-transform:translateZ(0px);位移，Z軸相當於垂直電腦屏幕，電腦屏幕打個釘子；
數值越大離得越近，近大遠小原則；
.p5{-webkit-perspective:400px;}
.img5{width:200px;-webkit-transform: translateZ(0);transition:3s all ease;}
.img5:hover{-webkit-transform: translateZ(200px)}
<style>
.p5{-webkit-perspective:400px;}
.img5{width:200px;-webkit-transform: translateZ(0);transition:3s all ease;}
.img5:hover{-webkit-transform: translateZ(200px)}
</style>
理解perspective-origin，默認值：perspective-origin:50% 50%，如 perspective-origin:top left表示眼睛在文體元素的左上角看元素，下面的圖解析
</p
1、
http://codepen.io/HugoGiraudel/pen/jpnsH
2、http://codepen.io/HugoGiraudel/pen/dhBlC
animation @keyframes
animation-name: 動畫默認none;
animation-duration：動畫持續時間；
animation-timing-function：動畫過度類型
linear:線性<br />
ease:平滑<br />
ease-in:由慢到快<br />
ease-out:由快到慢<br />
ease-in-out:由慢到快再到慢<br />
cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值<br />animation-delay:動畫延遲時間
animation-iteration-count:動畫循環次數，正整數或 infinite 無限循環，默認 1
animation-direction:循環中是否執行往返運動，normal正向，alternate 交替 默認normal
animation-play-state:動畫狀態，默認running,如paused暫停，不建議使用
以上这些参数都可以同时赋予多个值，只要注意各参数顺序对应即可
最簡單例子：
#demo1{
animation-name:move; /*必須*/
animation-duration:3s; /*必須*/
animation-iteration-count:1
}
@-webkit-keyframes move { /*必須*/
from { left:0 }
to { left:500px }
}<style>
demo1{width: 99px;height: 99px;background: #467B96;position: relative; animation-name:move;animation-duration:3s;animation-iteration-count:1}
@-webkit-keyframes move {
from { left:0 }
to { left:500px }
}
</style>
#demo {
animation-name: animation1, animation2; /* 指定动画名称 */
animation-duration: 2s 1s; /* 指定动画时长 */
}以上同時獲得兩個動畫事件，具體過程由@keyframes指定
#demo {
animation-name: animation1;
animation-duration: 2s;
animation-timing-function: linear;
}
@keyframes animation1{
from{opacity: 0; }
to{opacity: 1; }
}一個超贊的效果：
<h1>hi,man</h1>
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;margin:0 auto;width:15em;height:15em;overflow:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.circle h1{color:rgba(189,185,199,0);font-family:Lato,sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:color .8s ease-in-out;-moz-transition:color .8s ease-in-out;-ms-transition:color .8s ease-in-out;transition:color .8s ease-in-out}.circle:after,.circle:before{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,.2),inset 0 10.6em 0 rgba(30,140,209,.2),inset -10.6em 0 0 rgba(30,140,209,.2),inset 0 -10.6em 0 rgba(30,140,209,.2);-webkit-transition:box-shadow .75s;-moz-transition:box-shadow .75s;-ms-transition:box-shadow .75s;transition:box-shadow .75s}.circle:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.circle:hover:after,.circle:hover:before{box-shadow:inset .86em 0 0 rgba(255,0,0,.5),inset 0 .86em 0 rgba(252,150,0,.5),inset -.86em 0 0 rgba(0,255,0,.5),inset 0 -.86em 0 rgba(0,150,255,.5)}.circle:hover>h1{color:rgba(185,185,185,1)}
</style>
css3條紋背景
background-color: #313131;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
background-size: 4px 4px; /* 控制条纹的大小 */