1、過度
新增過渡效果:過渡效果執行完畢之後，缺省會還原到原始狀態
1.transition-property:新增過渡效果的樣式屬性名稱
transition-property: left;//
2.transition-duration:過渡效果的耗時 以秒做為單位
transition-duration: 2s;//設定過度耗時為2秒
3.transition-timing-function:設定時間函式--控制運動的速度，屬性值有點多，參考相關文件
transition-timing-function: linear;//均速過度，預設是ease（先快後慢）
transition-timing-function: steps(5);//整個過度過程分為5步完成
4.transition-delay:過渡效果的延遲
transition-delay: 2s;//過度的延遲時間
5.transition:為多個樣式同時新增過渡效果
transition: height 2s,width 2s linear 0s,background-color 5s linear 0s;
注意：過渡效果只能產生從某個值到另外乙個具體的值的過渡，比如不能加display:none過度到display:block;
一定要設定為哪些css樣式新增過渡效果
一定要設定過渡效果的耗時
例子：想通過過度的效果實現滑鼠移動到div上，div變大變色，滑鼠離開div後，缺省會自動還原
2、二維變換
transform
1.移動：translate
移動是參照元素的左上角
執行完畢之後會恢復到原始狀態，和過度一樣
如果只有乙個引數就代表x方向
如果有兩個引數就代表x/y方向
如：transform: translate(100px,100px);//讓某元素向x軸方向和y軸方向移動100px
新增水平或者垂直方向的移動
transform:translatex(100px);//transform: translate(100px,0px);
transform:translatey(100px);//transform: translate(0px,100px);
2.縮放：scale
實現縮放，1指不縮放，>1.01放大 <0.99縮小
預設參照元素的幾何中心進行縮放或擴充套件
如果只有乙個引數，就代表x和y方向都進行相等比例的縮放
如果有兩個引數，就代表x/y方向
transform: scale(2);//x y 方向都擴大2倍
transform: scale(2,1);//x方向擴大2倍，y方向上不變
transform:scalex(0.5);//縮放或擴充套件指定的方向
transform:scaley(0.5);//縮放或擴充套件指定的方向
3.旋**rotate
rotate(數值)。數值表示多少度，可正可負，正數為順時針方向，負數為逆時針方向
預設參照元素的幾何中心進行旋轉
如：transform: rotate(-90deg)//逆時針
4.斜切：skew
skew(數值)。數值表示多少度，可正可負，正數為順時針方向，負數為逆時針方向
transform-origin:
設定旋轉或者縮放軸心
可以用2個數字表示x和y座標
可以使用2個關鍵字表示某個點：left top right bottom center
transform-origin:100px 100px;//100,100座標點
transform-origin:left top;//左上角
3、設定任意元素居中：
父元素絕對定位（也可是其他定位，只要是定位即可）
子元素相對定位
設定子元素的left和top值分別為50%。定位的百分比是參照父容器的寬高
使用transform實現元素的居中，transform: translate(-50%,-50%);，百分比是參照元素本身的寬高
示例：4、三維變換
transform
1.移動：translate3d
translate3d(x方向的偏移，y方向的偏移，z方向的偏移)
transform: translate3d(400px,0,0);//transform: translate3dx(400px);
transform: translate3d(0px,400px,0);//transform: translate3dy(400px);
transform: translate3d(0px,0px,400px);//transform: translate3dz(400px);
2.縮放：scale3d
scale3d(x方向上的縮放，y方向的縮放，z方向的縮放)
大於1為放大，小於1為縮小
3.旋**rotate3d
rotate3d(x,y,z,angle);
x:代表x軸方向上的乙個向量值
y:代表y軸方向上的乙個向量值
z:代表z軸方向上的乙個向量值
angle為乙個角度
5、案例：實現乙個正方體
front
back
left
right
topbutton
css3中的變換 動畫和過渡
變換 分為2d變換和3d變換，但一次只能用乙個變換屬性，多個的話最後乙個會覆蓋前面所有最終被瀏覽器實現，變換可以成為過渡和動畫的乙個待變引數 類似width,opacity等 過渡 是動畫的初始模型和極簡實現，只有初始狀態 初始幀 和啟用狀態 結束幀 動畫 可定義初始幀 中間幀 結束幀，通過多幀 細...
CSS3過渡和動畫
此文首發於 lijing0906.github.io 智慧型運維,圓球一直勻速旋轉。html id testpage class topbar class ball src css3anitran 0.png alt srcset div class bottombar src css3anitra...
css3過渡和動畫
css3裡面新增屬性 transition animation 等等，方便了前端小夥伴們做動畫。不用再用js寫長長的一大串，效果還不好！這是對我等菜鳥來說，大神們怎麼著都可以，唉！用 來實現動畫，其實就是不同時間，元素有不同的狀態。而這裡面有個很好用的2d轉換屬性 transform，廣大瀏覽器的支...