1.2d轉換之移動translate（類似定位）
1.語法
transform:translate(x,y);
transform:translatex(n）；
transform:translatey(n）；
2.重點
1.定義2d轉換中的移動沿著x和y移動元素
2.translate最大的優點，不會影響到其他元素位置
3.translate中的百分比單位是相對於自身的translate:(50%,50%)
4.對行內元素沒有效果
1.語法
transform-origin：x y;
2.重點
1.注意後面的引數x和y用空格隔開
2.x和y預設轉換的中心點是元素的中心點（50% 50%）
3.還可以給x y設定畫素或者方位名詞（top bottom left right center）
1.語法
transform：scale（x,y）;
2.重點
1.注意其中的x y 用逗號分隔
2.transform：scale（2,2）;寬和高放大了兩倍
3.transform：scale（2）;寬和高放大了兩倍
4.transform：scale（0.5,0.5）;縮小0.5倍
5.最大優勢：可以設定轉換中心點縮放，預設以中心點縮放的，而且不影響其他盒子。
注意：
同時使用多個轉換，且格式為：transform：translate（），rotate(),scale()等
其順序會影響轉換的效果
當我們同時有位移和其他屬性的時候，要把位移放到最前。
5.1.動畫的基本使用
製作動畫的步驟
1.定義動畫
2.呼叫動畫
語法：用keyframed定義動畫（類似定義類選擇器）
@keyframes 動畫名稱
100%
呼叫：animation-name:動畫名稱；
animation-during:持續時間；
屬性 描述
@keyframes 規定動畫
animation 所有動畫的簡寫屬性，除了animation-play-state屬性
animation-name 限定@keyframes動畫的名稱（必須的）
animation-duration 規定動畫完成乙個週期所花費的時間或秒預設為0（必須的）
animation-timing-function 規定動畫的速度曲線，預設是ease
animation-delay 規定動畫何時開始，預設為0
animation-play-state 規定動畫是否執行或暫停，預設是running ,還有pasued
animation-fill-mode 規定動畫結束後狀態保持forwards,回到起始位置backwards
5.4速度曲線調節
值 描述
linear 動畫從頭到尾勻速
ease 預設，動畫以低速開始然後加快到結束變慢
ease-in 動畫以低速開始
ease-out 動畫以低速結束
ease-in-out 動畫以低速開始和結束
steps() 指定函式中的間隔數量（步長）
1.移動translate3d
transform:translate3d(x,y,z)
2.透視perspective
1.產生的視覺近小遠大
2.透視的單位是畫素
3.透視寫在被觀察元素的父盒子上面
3.3d旋轉rotate3d
transform:rotatex(deg)沿著x正方向旋轉deg度 左手法則，大拇指指向x軸正向
transform:rotatey(deg)沿著y正方向旋轉deg度 左手法則，大拇指指向y軸正向
transform:rotatez(deg)沿著z正方向旋轉deg度
transform:rotate3d(x,y,z,deg)沿著正方向旋轉deg度，其中xyz顯示1或0
4.3d呈現transform-style
控制子元素是否開啟三維立體環境
transform-style:flat子元素不開啟3d空間預設的
transform-style:preserve-3d子元素開啟立體空間
**寫給父級，但是影響的是子盒子
這個屬性很重要後面必用
CSS3新特性學習
最近發現很多css3的新特性不熟悉，所以今天把它們都學習一邊，做出效果加深印象，說到css3還加了蠻多的特性，像一些border的一些效果，動畫屬性animation trasiform等。效果 實現 height 100px width 100px margin 0 auto background...
CSS3新特性學習筆記
新選擇器 邊框 背景公升級 圓角 陰影 新的盒模型 漸變 動畫 2d3d轉換 伸縮布局 多列布局 新單位字首應用 瀏覽器相容 漸進增強 語法規則說明 表示全部可選項 表示多選一 代表多選一 代表出現0次或以上 代表出現1次或者以上 代表可選的，即出現0次或1次 代表出現a次 代表出現 a次以上b次以...
CSS3有哪些新特性？CSS3新特性詳解
本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...