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