2d 轉換
2d 轉換是改變標籤在二維平面上的位置和形狀
移動： translate
旋** rotate
縮放： scale
translate 語法
x 就是 x 軸上水平移動
y 就是 y 軸上水平移動
transform: translate(x, y)
transform: translatex(n)
transfrom: translatey(n)
2d 的移動主要是指 水平、垂直方向上的移動
translate 最大的優點就是不影響其他元素的位置
translate 中的100%單位，是相對於本身的寬度和高度來進行計算的行內標籤沒有效果
**演示：
/* 平移 */
/* 水平垂直移動 100px */
/* transform: translate(100px, 100px); */
/* 水平移動 100px */
/* transform: translate(100px, 0) */
/* 垂直移動 100px */
/* transform: translate(0, 100px) */
/* 水平移動 100px */
/* transform: translatex(100px); */
/* 垂直移動 100px */
transform: translatey(100px)
2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉
使用步驟：
給元素新增轉換屬性 transform
屬性值為 rotate(角度) 如 transform:rotate(30deg) 順時針方向旋轉30度，單位是deg
設定元素旋轉中心點(transform-origin)
transform-origin 基礎語法
x y 預設旋轉的中心點是元素的中心 (50% 50%)，等價於 center center
還可以給 x y 設定畫素或者方位名詞(top、bottom、left、right、center)
scale 的作用
用來控制元素的放大與縮小
同時使用多個轉換，其格式為 transform: translate() rotate() scale()
動畫(animation)
動畫是 css3 中最具顛覆性的特徵之一，可通過設定多個節點來精確的控制乙個或者一組動畫，從而實現複雜的動畫效果
定義動畫語法格式
@keyframes 動畫名稱
100%
}使用動畫語法格式
div
/* 動畫名稱 */
animation-name: move;
/* 動畫花費時長 */
animation-duration: 2s;
/* 動畫速度曲線 */
animation-timing-function: ease-in-out;
/* 動畫等待多長時間執行 */
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* 動畫結束之後的狀態 */
animation-fill-mode: forwards;
animation-play-state: paused;
實用的css3樣式
1.word wrap word wrap normal break word 只在允許的斷字點換行 瀏覽器保持預設處理 斷字 在長單詞或url位址內部進行換行。2.font face internet explorer 9 firefox,chrome,safari,和 opera 支援 woff...
CSS3樣式和新特性
css3樣式 1邊框 border radius圓角邊框div border shadow邊框陰影div border image邊框 相容性 div background size div 3字型 font face 擱置 在 css3 之前，web 設計師必須使用已在使用者計算機上安裝好的字型。...
css3樣式文字超出隱藏
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 一行內容 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 display ...