將transform屬性的值設定為rotate(),即可實現旋轉變形，角度為正，則順時針方向旋轉，否則逆時針方向旋轉
/* 旋轉45度 */
transform:rotate(45deg);
transform-origin屬性可以設定自己的自定義變換原點
/* 以左上角為中心原點進行旋轉 */
transform-origin:0 0;
transform屬性的值設定為scale()，即可實現縮放變形，當數值小於1時，表示縮小元素；大於一表示放大元素
將transform屬性的值設定為skew()，即可實現斜切變形
/* x斜切角度 y斜切角度 */
transform:skew(10deg, 20deg);
transform屬性的值設定為translate()，即可實現位移變形。和相對定位非常像，本質上仍然是在原來的位置，只不過渲染在新的地方，渲染的圖形不會對頁面其他元素產生任何影響。（相容到ie9）
/* 向右移動 向下移動 */
transform:translate(100px, 200px);
transform屬性的值設定為rotatex()或者rotatey()，即可實現繞橫軸、縱軸旋轉
perspective屬性用來定義透視強度，單位是px。
旋轉的元素外面要包裹一層屬性有perspective的盒子
__當元素進行3d旋轉後，__可以繼續新增translatex()、translatey()、translatez()屬性讓元素在空間進行移動
transition過渡可以為乙個元素在不同樣式之間變化新增「補間動畫」。（相容到ie10）
transition屬性4要素
/* 什麼屬性要過渡 動畫時長 變化速度曲線 延遲時間 */
transition: width 1s linear 0s;
如果要所有屬性都參與過渡，可以寫all
transition: all 1s linear 0s;屬性意義
transition-property要過渡的屬性
transition-duration動畫時間
transition-timing-function動畫變化曲線（歡動效果）
transition-delay延遲時間
變化速度曲線
常用的緩動引數：ease、linear、ease-in、ease-out、ease-in-out
**可以生成貝塞爾曲線，可以自定義動畫緩動引數
使用@keyframes來定義動畫，keyframes表示關鍵幀
/* 定義動畫 r動畫的名字 */
@keyframes r
/* 結束狀態 */
to }
animation屬性呼叫動畫
/* 動畫名字 總時長 緩動效果 延遲 */
animation:r 1s linear 0s;
/* 3表示動畫執行3次 */
animation:r 1s linear 0s 3;
infinite
alternate屬性可以讓動畫的偶數次自動逆執行
forwards屬性可以讓動畫停止在結束狀態
@keyframes yd
50%
100%
}
前端學習 第六天
第六天知識總結 一 浮動補充 新增浮動的元素不佔據空間 脫離文件流 只要子元素有浮動，父元素必須新增高度 二 頁面補充 a 設計圖 版式寬度 1920 1680 網頁的版心 960 1200 結構規劃 b id名稱 網頁外圍結構 pc端 版心寬度不能用百分比 c 怎樣讓版心左右居中？給要做居中的版心...
前端第六天
js屬於編寫執行在瀏覽器上的指令碼語言 採用ecmascript語法,來操作bom及dom 操作bom 瀏覽器物件模型 操作dom 文件物件模型 如 使用瀏覽器的歷史記錄,使用瀏覽器的彈出框,修改頁面內容,修改頁面樣式,響應使用者互動事件等 js引入 1.行間式 存在於行間事件中 文字內容 2.內聯...
第六天學習
變數的作用域 區域性變數 在函式內部定義的變數，這個變數只能在函式內部使用，在全域性當中不能使用。使用就報錯了。全域性變數 在函式外部定義的變數，這個變數可以在全域性使用。但是我們一般不推薦使用全域性變數 因為可能會意外的修改掉變數的值。迫不得已不要用全域性變數 衝突處理原則 就近原則。而不是從上到...