今日框架：
今日重點：
一、2d轉換：2d 轉換是改變標籤在二維平面上的位置和形狀
1、translate 移動
1）語法：transform: translate(x, y)
2）重點知識點
（1）2d 的移動主要是指 水平、垂直方向上的移動
（2）translate 最大的優點就是不影響其他元素的位置
（3）translate 中的100%單位，是相對於本身的寬度和高度來進行計算的
（4）行內標籤沒有效果
2、讓乙個盒子水平垂直居中
transform: translate（-50%，-50%）
3、rotate 旋轉：2d 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉
1）語法：transform: rotate(0deg);（屬性值為 rotate(角度)）
2）重點知識點
（1）rotate 裡面跟度數，單位是 deg
（2）角度為正時，順時針，角度為負時，逆時針
（3）預設旋轉的中心點是元素的中心點
4、三角
利用偽元素，給盒子加兩個邊框，再旋轉
5、transform-origin 設定元素旋轉中心點
1）語法：transform-origin: x y;
2）重要知識點
（1）注意後面的引數 x 和 y 用空格隔開
（2）x y 預設旋轉的中心點是元素的中心 (50% 50%)，等價於 center center
（3）還可以給 x y 設定畫素或者方位名詞(top、bottom、left、right、center)
6、scale 縮放：用來控制元素的放大與縮小
1）語法：transform: scale(x, y)
2）知識要點
（1）注意，x 與 y 之間使用逗號進行分隔
（2）transform: scale(1, 1): 寬高都放大一倍，相當於沒有放大
（3）transform: scale(2, 2): 寬和高都放大了二倍
（4）transform: scale(2): 如果只寫了乙個引數，第二個引數就和第乙個引數一致
（5）transform:scale(0.5, 0.5): 縮小
（6）scale 最大的優勢：可以設定轉換中心點縮放，預設以中心點縮放，而且不影響其他盒子
7、skew 拉伸
語法：transform：skew（45deg，45deg）
8、 2d 轉換綜合寫法以及順序問題
1）知識要點
（1）同時使用多個轉換，其格式為 transform: translate() rotate() scale()
（2）順序會影響到轉換的效果(先旋轉會改變座標軸方向)
（3）但我們同時有位置或者其他屬性的時候，要將位移放到最前面
二、動畫(animation)：可通過設定多個節點來精確的控制乙個或者一組動畫，從而實現複雜的動畫效果
1、基本使用：先定義動畫，在呼叫定義好的動畫
2、語法：@keyframes 動畫名稱 div 呼叫動畫，持續時間
3、動畫序列
（1）0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
（2）在 @keyframs 中規定某項 css 樣式，就由建立當前樣式逐漸改為新樣式的動畫效果
（3）動畫是使元素從乙個樣式逐漸變化為另乙個樣式的效果，可以改變任意多的樣式任意多的次數
（4）用百分比來規定變化發生的時間，或用 from 和 to，等同於 0% 和 100%
4、動畫常見屬性
2D轉換及動畫
可以實現移動 旋轉 放縮效果的特徵 移動類似於定位，可以改變元素在頁面中的位置。語法 transform translate x,y 也可分開寫 transform translatex n transform translatey n 特點 旋轉是指讓元素在二維平面上順時針或逆時針旋轉 語法 tr...
2D動畫效果transform
transform 2d轉換 1，移動 translate transform translate x,y translate x,y 定義 2d 轉換。translatex x 定義轉換，只是用 x 軸的值。translatey y 定義轉換，只是用 y 軸的值。transform transla...
2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...