資訊專欄INFORMATION COLUMN
摘要：可以將元素旋轉(zhuǎn)，縮放，移動，傾斜等。通過設(shè)置軸的值來定義縮放轉(zhuǎn)換。旋轉(zhuǎn)，在參數(shù)中規(guī)定角度如。如下勻速時間效果如下下面主要介紹屬性值的效果，所以都配合來使用吧，方便看看前后變化的不同。
也就是說目前不考慮老瀏覽器的話是不用加前綴的，感謝菜鳥教程：https://www.runoob.com/cssref/css3-pr-transform.html
transform默認(rèn)值none;就是不轉(zhuǎn)換，不繼承，js中對其更改示例：object.style.transform="rotate(7deg)"
transform屬性讓元素進(jìn)行2D或3D轉(zhuǎn)換。可以將元素：旋轉(zhuǎn)，縮放，移動，傾斜等。
transform: none|transform-functions;
?
none是默認(rèn)的，就是不進(jìn)行轉(zhuǎn)換，好理解。transform-functions有哪些？如下表：
| transform-functions的值 | 描述 | 示例 |
|---|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。 | ? |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。 | ? |
| translate(x,y) | 位移，將元素沿著x軸，y軸移動指定的距離。 | transform:translate(100px,20px); |
| translate3d(x,y,z) | 定義 3D 轉(zhuǎn)換。 | ? |
| translateX(x) | 定義轉(zhuǎn)換，只是用 X 軸的值。 | ? |
| translateY(y) | 定義轉(zhuǎn)換，只是用 Y 軸的值。 | ? |
| translateZ(z) | 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。 | ? |
| scale(x,y) | 縮放,將元素沿著x軸，y軸縮放一定的倍數(shù) | ? |
| scale3d(x,y,z) | 定義 3D 縮放轉(zhuǎn)換。 | ? |
| scaleX(x) | 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。 | ? |
| scaleY(y) | 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。 | ? |
| scaleZ(z) | 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。 | ? |
| rotate(angle) | 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度（如：30deg）。 | transform: rotate(360deg); |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉(zhuǎn)。 | ? |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉(zhuǎn)。 | ? |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。 | ? |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。 | ? |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜。 |
transform: rotate(30deg,60deg); |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜。 | ? |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜。 | ? |
| perspective(n) | 為 3D 轉(zhuǎn)換元素定義透視視圖。 | 測試 |
頁面有個幾個div，寬200px，高100px，有的為其加上transform:rotate(30deg)，效果如下（1236是沒有定義transform的）：
注意，這是打開頁面就會變形旋轉(zhuǎn)好的，不會有動畫！??！
使用transition過渡，才會產(chǎn)生動畫。如下：
1 .box5 { 2 /* 勻速 時間2s */ 3 transition: linear 2s; 4 } 5 .box5:hover{ 6 transform: rotate(360deg); 7 }
?
效果如下：
?
?下面主要介紹transform屬性值的效果，所以都配合transition來使用吧，方便看看前后變化的不同。
skewX(x) ，x是傾斜的度數(shù)，
1 <style type="text/css"> 2 .box1 { 3 width: 200px; height: 100px; background-color: #FF9900; 4 transition: 0.5s; 5 } 6 .box1:hover { 7 transform: skewX(-45deg); 8 } 9 style> 10 ... 11 <div style="border: #000000 1px solid"> 12 <div class="box1">看看我的變化div> 13 div> 14 我是下一行內(nèi)容
?效果如下：
?
?skewY(y)，上面代碼skewX改為skewY，效果如下
skew就是skewX和skeY的合集，上面第7行transform: skewX(-45deg);改為transform: skew(-45deg,45deg);效果如下
?
在這里，我不得不承認(rèn)，還是在大腦總難以圖像化：skew怎么去變形的過程。只有x軸上變動可以在腦中有個印象，只有Y軸變動，也可以有個動態(tài)的過程，都變動的話，嗯，腦子中形成不了那個印象。下面圖對讓變動和原圖對比，看看怎么變的，也不深究了。。。
?
再來看看縮放函數(shù)transform:scale(2); 放大兩倍（看到?jīng)]，放大了是視覺上的，并不擠占兄弟和父級的空間）
1 .box1 { 2 width: 200px; height: 100px; background-color: #FF9900; 3 transition: 0.5s; 4 } 5 .box1:hover { 6 /* scale括號里只能是正數(shù)或0 */ 7 transform:scale(2); 8 }
1 <body> 2 <div style="border: #000000 1px solid; margin-left: 200px; margin-top: 200px;"> 3 <div class="box1">看看我的變化div> 4 div> 5 body>
?
?
還有一個函數(shù)translate，它的意思就是位移！translateX只是它的分支。比如，向左移動50px之類的。
1 .box1 { 2 width: 200px; height: 100px; background-color: #FF9900; 3 transition: 0.5s; 4 } 5 .box1:hover { 6 /* 沿x軸移動100px */ 7 transform:translateX(100px); 8 }
?
?
上面說到的旋轉(zhuǎn)、平移，縮放，其實都有個基點（可以理解為變形中未動的點，先用釘子將該點釘起來，然后完成變形，釘?shù)狞c不同，變形后新位置當(dāng)然也不一樣?。?，默認(rèn)的是正中心位置（重心），上圖表明下基點是什么，如下：
基點在左上角和中心進(jìn)行旋轉(zhuǎn)的話，區(qū)別如下圖
?transform-origin要和transform一起用，畢竟如果沒有transform變形，談基點有什么意義呢？
/* xyz代表了x軸，y軸，z軸，它們的取值如下 x軸取值可以為：left、center、right、length（某像素）、%（某百分比） y軸取值可以為：top、center、bottom、length（某像素）、%（某百分比） z軸取值可以為：length（某像素） */ transform-origin: x y z; /* 默認(rèn)：transform-origin:50% 50% 0 JS中：object.style.transformOrigin="20% 40%" */
?
?
?
?
a
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1387.html
摘要：轉(zhuǎn)化的轉(zhuǎn)化分為以下幾種移動旋轉(zhuǎn)縮放傾斜混合每種轉(zhuǎn)化都還有對應(yīng)的版本注意閉合的內(nèi)聯(lián)元素不支持轉(zhuǎn)化，過渡和動畫如等。 過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關(guān)內(nèi)容并記錄下。在開始之前，首先看看CSS3的轉(zhuǎn)化。 轉(zhuǎn)化 CSS3的轉(zhuǎn)化分為以下幾種： translate 移動 rotate 旋轉(zhuǎn) scale 縮放 skew 傾斜 matrix 混合 每種轉(zhuǎn)化都還有對應(yīng)的3d版...
摘要：前綴瀏覽器兼容根據(jù)了解，屬性大部分支持，部分支持，少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉(zhuǎn)換過渡關(guān)鍵幀動畫轉(zhuǎn)換及以上支持，需添加前綴屬性的方法使用縮放軸縮放倍，軸縮放倍，只有一個值時為縮放倍數(shù)傾 css3前綴（瀏覽器兼容） 根據(jù)了解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前綴 // -webkit- Safari and Chrome（...
摘要：字面上的意思就是使改變外觀改變形態(tài)在中主要包括以下幾種旋轉(zhuǎn)傾斜縮放移動下面我們就一起來看看的具體如何實現(xiàn)。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。如果您有更好的建議，不如留言一起討論，共同進(jìn)步再次感謝您耐心的讀完本篇文章。 transform 字面上的意思就是 使改變外觀、改變形態(tài) 在css3中transform主要包括以下幾種 1.旋轉(zhuǎn) rotate 2.傾斜 skew 3.縮放 sca...
摘要：變形通過變換，我們能夠?qū)υ剡M(jìn)行移動縮放轉(zhuǎn)動拉長或拉伸。對元素進(jìn)行變形。對元素某個屬性或多個屬性的變化，進(jìn)行控制時間等，類似的補(bǔ)間動畫。但只有兩個關(guān)鍵貞。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。 transform 變形 通過 CSS3 變換，我們能夠?qū)υ剡M(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。使用transform屬性為元素應(yīng)用變換。 1、Transform：對元素進(jìn)行變形。 2、Trans...
閱讀 1105·2023-04-25 14:35
閱讀 2842·2021-11-16 11:45
閱讀 3443·2021-09-04 16:48
閱讀 2197·2021-08-10 09:43
閱讀 541·2019-08-30 13:17
閱讀 1636·2019-08-29 13:27
閱讀 906·2019-08-26 13:58
閱讀 2167·2019-08-26 13:48
