2d效果
1.css3過渡，讓動畫更柔和，
transition:ie10 firefox chrome opera支援，chrome25以及更早版本safari需要新增-webkit-
transition:width 0.5s ease 1s(delay);transition:all 0.5s;(常用)
trasition-property:規定css應用的屬性名稱
transition-property:width,height,background;可以乙個
transition-duration:預設0
transition-timing-function:過渡效果的曲線，預設ease
linear:勻速
ease:逐漸減慢；ease-in:慢速開始；ease-out:慢速結束；ease-in-out:慢速開始和結束
cubic-bazier(0,0,0,0):0-1；；cubic-bazier應用參看
transition-delay:2s開始，預設0
css3過渡，讓動畫更柔和
.box.box:hover
<div
class
="box"
>
div>
2.2d變形
transform（預設中心點，縮放移動旋轉）
rotate:rotate(30deg);需要現有trasform-origin定義基點，正數順時針，
skew:扭曲skew(x,y);skewx/y(x/y);skew(30deg,30deg);
scale：scale(x,y)；水平垂直方向同時縮放，scalex/y(x/y);x/y小於1縮小
traslate：移動,tanslate(x,y)水平和垂直方向同時移動，translatex/y(x/y);
matrix：矩陣變形
trasform-origin:定義基點, trasform-origin:x-axis y-axis;
,x和y可以是px % em,x可以是left,center,right,y可以是top,center,bottom
css3變形
.box1.box1:hover
<div
class
="box1"
>
div>
3.3d效果
transform:
3d位移
相對於2d位移多了translatez()和translate3d();y負值向上，x負值向左，z負值越遠
3d旋轉
新增了rotatex()從下向上轉;rotatey()從左向右轉;rotatez();基點旋轉
3d縮放
scale3d();scalez();看不出變化，
transform-origin:變形原點，transform-origin:x y z;
transform-style:被巢狀的元素在3d空間中顯示，transform-style:flat(子元素不保留3d位置)/preserve-3d(子元素保留3d位置),
perspective:透視性,none沒有3d,取值越小越靠近，越明顯， perspective:800px-1200px；
(常用)，可以寫在父、子元素上，但同時有多個子元素變形時，效果不同
perspective-origin:我們用該屬性來定義3d元素視線滅點
backface-visibility:在不面對螢幕時是否可見
3d旋轉
.box2.box2 p.box2 spanp:nth-child(1) span:hoverp:nth-child(2) span:hoverp:nth-child(3) span:hover
<div
class
="box2"
>
<
p><
span
>x旋轉
span
>
p><
p><
span
>y旋轉
span
>
p><
p><
span
>z旋轉
span
>
p>
div>
3d盒子
.box3.box3 ul.box3 ul:hover.box3 ul li.box3 ul li:nth-child(1).box3 ul li:nth-child(2).box3 ul li:nth-child(3).box3 ul li:nth-child(4).box3 ul li:nth-child(5).box3 ul li:nth-child(6)
<div
class
="box3"
>
<
ul><
li>前
li><
li>後
li><
li>左
li><
li>右
li><
li>上
li><
li>下
li>
ul>
div>
css3動畫
1過渡：transition，transform，只能定義首位。
@keyframes animationname}
keyframes-selector動畫時長，from-to或者0%-100%(推薦)
animation:簡寫屬性，除了animation-play-state
animation:aa 2s linear 2s infinte alternate;
animation-name:動畫名稱
animation-duration:時間，預設0
animation-timing-function:3d元素過渡效果的曲線,參考transition
animation-delay:何時開始，預設0
step-start立馬跳到下一幀;等同於 steps(1,start). steps(10,start)動畫分成10步，動畫執行時為開始左側端點的部分為開始。
step-end立馬跳到下一幀;等同於 steps(1,end). steps(10,end)動畫分成10步，動畫執行時以結尾端點為開始，預設值為 end。
css3動畫
.box4第一種方式：/*@keyframes aato}
*/第二種方式：@keyframes aa 25%50%75%100%}
<div
class
="box4"
>
div>
CSS3新增2D和3D屬性
3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...
CSS3屬性（過渡，2D變換，3D變換，動畫）
在css3中，我們如果不使用js 或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...