transform：可以對元素物件旋轉rotate、縮放scale、移動式translate、傾斜skew、矩陣變形matrix。
範例：
<strong>transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);<br>/*矩阵变形*/<br>matrix(<number>,<number>,<number>,<number>,<number>,<number>);<br>/*透视*/<br>perspective(length);</strong>
transition：過度屬性
#transition：過度效果的css屬性名稱過度效果時長速度效果的速度曲線過度效果開始時間；
<strong>transition: property duration timing-function delay;<br>/*示例*/<br>transition:1s ease all;<br>-webkit-tansition:1s ease all;<br>-moz-transition:1s ease all;<br>-o-transition:1s ease all;</strong>
rotate()：二維空間旋轉元素。
若元素設定了perspective值，可用rotate3d()實作三維空間內旋轉。
<strong>rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/<br>rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/<br>rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/</strong>
scale()
<strong>scaleX(<number>)/*只在X轴（水平方向）缩放元素*/<br>scaleY(<number>)/*只在Y轴（垂直方向）缩放*/<br>scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/</strong>
#translate([,])：移動,是位移量。
<strong>translateX(<translation-value>);/*只在X轴（水平方向）移动*/<br>translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/<br>translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/</strong>
skew()：傾斜
<strong>skewX(<angle>);/*只在X轴（水平）倾斜*/<br>skewY(<angle>);/*只在Y轴（垂直）倾斜*/</strong>
matrix(a,c,e,b,d,f)：矩陣變形，c 、e的值用正弦或餘弦值表示。
a：表示scaleX(); X軸縮放
c：skewY(); Y軸傾斜
e：skewX(); X軸傾斜
b ：scaleY(); Y軸縮放
d：translateX() X軸移動
f：translateY() Y軸移動
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
perspective()：透視
<strong>.wrap{<br> perspective:1000px;
<br>}<br>.wrap .child{<br> transform:perspective(1000px);<br>}</strong>transition-property：過度的屬性
<strong>transition-property:all;/*针对所有元素都有过度效果*/<br>transition-property:none;/*没有元素有过度效果*/<br>transition-property:ident;/*指定css属性有过度效果，例如width*/</strong>
transition-duration：過度時間
transition-delay：延遲時間，為負數時，過度動作會從該時間點開始顯示，先前的動作會被截斷。
transition-timing-function：過度效果，預設ease。
<strong>transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/<br>transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/<br>transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/<br>transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/<br>transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/<br>transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/</strong>
animation-name：動畫名稱，必須與規則@keyframes搭配使用，因為動畫名稱由@keyframes定義，如果提供多個屬性值以逗號隔開。
@keyframes相當於命名空間，後面跟著一個名詞，如果在class中的animation-name定義了與之對應的name就可以執行動畫。定義動畫時可直接使用關鍵字from和to，從一種狀態過度到另一種狀態。
<strong>.animation_name{<br> left:0;<br> top:100px;<br> position: absolute;<br> -webkit-animation: 0.5s 0.5s ease infinite alternate;<br> -moz-animation: 0.5s 0.5s ease infinite alternate;<br> -webkit-animation-name:demo;<br> -moz-animation-name:demo;<br>}<br>@-webkit-keyframes demo{<br> from{left:0;}<br> to{left:400px;}<br>}<br>@-webkit-keyframes demo1{<br> 0%{left:0;}<br> 50%{left:200px;}<br> 100%{left:400px;}<br>}</strong>animation-duration：動畫時間
animation-timing-function：播放方式，取值如下：
#ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函數，既立方貝塞爾。
linear：線性效果
ease-in：漸顯效果
ease-out：漸隱效果
ease-in-out：漸顯漸隱效果
step-start：馬上跳前往動畫結束狀態
step-end：保持動畫開始狀態，到動畫執行時間結束，馬上跳到動畫結束狀態
step([,[start | end]]?)：第一個參數number為指定的間隔數，即將動畫分為n步階段性顯示，第二個參數預設為end，設定最後一步狀態，start為結束時的狀態，end為開始時的狀態，若設定與animation- fill-mode的效果衝突，以animation-fill-mode的設定為動畫結束狀態。
cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果
#animation-delay：開始播放時間
# animation-iteration-count：播放次數，取值為infinite時表示無限循環播放
#normal：正常方向reverse：動畫反向運行，方向總是與normal相仿alternate：動畫會循環正反交替運動
animation-fill- mode：播放後的狀態，取值：
forwards：結束後保持動畫結束的狀態backwards：結束後返回動畫開始時狀態
both：結束後可遵循forwards和backwards兩個規則
animation-play-state：檢索或設定物件動畫的狀態，取值：running：默認，動作
四、關聯屬性
以上是使用CSS3變形、過渡、動畫、關聯屬性解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
