transform (變形-高矮胖瘦縮放、旋轉移動傾斜等 )跟 transition(變化 / 轉變 / 過渡 / 改變的過程 )
---------------------------------------------------------- * transform 屬性 : 一樣W3school 附上 http://www.w3school.com.cn/cssref/pr_transform.aspwww.w3school.com.cn/cssref/pr_transform.asp 中心點 : transform-origin: 50% 50% 0 ; 這是默認值,中心點為起點 transform-origin: 100% 100% 0; 以右下角為起點 transform-origin: 0 0 0 ; 以左上角為起點 <移動> translate( x , y ) 2D 移動。X/Y軸座標移動 transform : translate(50px,100px); -ms-transform : translate(50px,100px); /* IE 9 */ -webkit-transform : translate(50px,100px); /* Safari and Chrome */ -o-transform : translate(50px,100px); / * Opera */ moz-transform : translate(50px,100px); /* Firefox */ translate3d( x , y , z ) 3D 移動。X/Y/Z軸移動 translateX( x ) X 軸移動。 translateY( y ) Y 軸移動。 translateZ( z ) Z 軸移動。 <縮放大小> scale( x , y ) 2D 縮放。X/Y軸縮放。 transform : scale( 0.5 , 0.2 ) = X軸(寬度)變一半,Y軸(高度)變0.2倍 scale3d( x , y , z )定義3D 縮放。 scaleX( x )設置X 軸的值來縮放。 scaleY( y )設置Y 軸的值來縮放。 scaleZ( z )設置Z 軸的值來3D 縮放。 <旋轉> rotate( angle ) 2D 旋轉,transform : rotate(50deg) = 旋轉50度 rotate3d( x , y , z , angle) 3D 旋轉。 rotateX( angle )X 軸的3D 旋轉。 rotateY( angle )Y 軸的3D 旋轉。 rotateZ( angle )Z 軸的3D 旋轉。 <傾斜> skew( x-angle , y-angle )X 和Y 軸的2D 傾斜。 transform : skew(-20deg,0deg) => 平行四邊形 skewX( angle )X 軸的2D 傾斜。 skewY( angle )Y 軸的2D 傾斜。 --------還沒看過例子---------------- perspective( n )為3D 轉換元素定義透視視圖。 matrix( n , n , n , n , n ,n )把所有2D 轉換方法組合在一起,使用六個值的矩陣。 matrix3d( n , n , n , n , n, n , n , n , n , n , n , n ,n , n , n , n )定義3D 轉換,使用16 個值的4x4 矩陣。 ------------------------------------- 支援度 : IE 10、Firefox、Opera 支持transform 屬性。 IE 9 需要前綴詞。支持替代的-ms-transform 屬性(僅適用於2D 轉換)。 Safari 和Chrome 支持替代的-webkit-transform 屬性(3D 和2D 轉換)。 Opera 只支持2D 轉換。 * transition 屬性 : div { /*----------------指定寬度屬性要變化,時間長為2秒-------------------------*/ width:100px; height: 200px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari和Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; height : 500px; } => 滑入DIV時,寬度花2秒變長到300px,高度是直接變長,沒有動感。 transition不指定屬性的話,hover時就會寬高都有動態的變化。 * 需要多個樣式添加過渡效果,請添加多個屬性,由逗號隔開: div { transition: width 2s, height 2s, transform 5s; } div:hover { width:200px; height:200px; transform:rotate(180deg); } =>寬高變化 花2秒 ; 旋轉花5秒。秒數一樣可以寫成div { transition: 2s; }就好。 有DEMO可玩 http://www.w3school.com.cn/css3/css3_transition.asp ============== transition 簡寫屬性,用於在一個屬性中設置四個過渡屬性。 transition-property 過渡的CSS 屬性的名稱。 transition-duration 定義過渡效果花費的時間。默認是0。 transition-timing-function 規定過渡效果的時間曲線。默認是"ease"。 transition-delay 規定過渡效果何時開始。默認是0。 div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } 簡寫=> div { transition: width 1s linear 2s ; } 延遲2秒才開始寬度變化 ============== 支援度 : IE 10、Firefox、Chrome 以及Opera 支持transition 屬性。 Safari 需要前綴-webkit-。 PS: IE 9以及更早的版本,不支持transition屬性。 PS : Chrome 25以及更早的版本,需要前綴-webkit-。
0 評論
發表回覆。 |