transform變換
css3 transform變換
1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translatex、translatey、translatez 設定三維移動
8、rotatex、rotatey、rotatez 設定三維旋轉
9、scalex、scaley、scalez 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見
transform是乙個靜態的效果，不是做動畫的；但可以和動畫進行配合使用；
其中，旋轉用的比較多；
位移，縮放，旋轉，斜切示例
位移，縮放，旋轉，斜切示例
變換中心
transform-origin變換中心示例
翻轉示例翻轉示例
翻面動畫示例的說明文字
``` animation動畫 css3 animation動畫 1、@keyframes 定義關鍵幀動畫 2、animation-name 動畫名稱 3、animation-duration 動畫時間 4、animation-timing-function 動畫曲線
normal 預設動畫結束不返回
alternate 動畫結束後返回
8、animation-play-state 動畫狀態
paused 停止
running 運動
9、animation-fill-mode 動畫前後的狀態
none 不改變預設行為
forwards 當動畫完成後，保持最後乙個屬性值（在最後乙個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第乙個關鍵幀中定義）
both 向前和向後填充模式都被應用
10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性
animation使用示例
animation使用示例
風車旋轉示例
loading動畫的製作
css3新增選擇器，不用寫過多的class，直接用某某下的某某的第幾個即可；
loading動畫
loading...
loading動畫
animation步數的應用-走路動畫
走路動畫示例
最後，給大家推薦乙個前端學習高階內推交流圈子（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（會定期免費提供一些收藏的免費學習書籍資料以及整理好的面試題和答案文件！）
願大家都能在程式設計這條路，越走越遠。
web前端之CSS3（2） 漸變
css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。css3 定義了兩種型別的漸變 gradients 語法 background linear gradient direction,color stop1,color stop2,線性漸變 從上到下 預設情況 ba...
css3 2 屬性的選擇器
存在和值屬性選擇器1 attr 該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。name 李立超曉飛張 白浩傑腿長1公尺8 佟剛陳雷 李賀飛 view code 存在和值屬性選擇器2 attr val 該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。name atg...
css3 2 屬性的選擇器
存在和值屬性選擇器1 attr 該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。name atguigu llc 李立超 atguigu xfz 曉飛張 atguigu bhj 白浩傑 atguigu sym 腿長1公尺8 佟剛陳雷 李賀飛view code 存在和值屬性選擇器...