1.transform瀏覽器支持情況

也就是說目前不考慮老瀏覽器的話是不用加前綴的，感謝菜鳥教程：https://www.runoob.com/cssref/css3-pr-transform.html

transform默認值none;就是不轉換，不繼承，js中對其更改示例：object.style.transform="rotate(7deg)"

2.transform能干啥？

transform屬性讓元素進行2D或3D轉換。可以將元素：旋轉，縮放，移動，傾斜等。

3.transform怎么用？

transform: none|transform-functions;

none是默認的，就是不進行轉換，好理解。transform-functions有哪些？如下表：

transform-functions的值	描述	示例
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 矩陣。
translate(x,y)	位移，將元素沿着x軸，y軸移動指定的距離。	transform:translate(100px,20px);
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	縮放,將元素沿着x軸，y軸縮放一定的倍數
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	2D 旋轉，在參數中規定角度（如：30deg）。	transform: rotate(360deg);
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: rotate(30deg,60deg);
skewX(angle)	定義沿着 X 軸的 2D 傾斜。
skewY(angle)	定義沿着 Y 軸的 2D 傾斜。
perspective(n)	為 3D 轉換元素定義透視視圖。	測試

4.詳細介紹下transform屬性怎么用

頁面有個幾個div，寬200px，高100px，有的為其加上transform:rotate(30deg)，效果如下（1\2\3\6是沒有定義transform的）：

注意，這是打開頁面就會變形旋轉好的，不會有動畫！！！

使用transition過渡，才會產生動畫。如下：

1             .box5 {
2                 /* 勻速 時間2s */
3                 transition: linear 2s;
4             }
5             .box5:hover{
6                 transform: rotate(360deg);
7             }

效果如下：

下面主要介紹transform屬性值的效果，所以都配合transition來使用吧，方便看看前后變化的不同。

skewX(x) ，x是傾斜的度數，

 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         我是下一行內容

效果如下：

skewY(y)，上面代碼skewX改為skewY，效果如下

skew就是skewX和skeY的合集，上面第7行transform: skewX(-45deg);改為transform: skew(-45deg,45deg);效果如下

在這里，我不得不承認，還是在大腦總難以圖像化：skew怎么去變形的過程。只有x軸上變動可以在腦中有個印象，只有Y軸變動，也可以有個動態的過程，都變動的話，嗯，腦子中形成不了那個印象。下面圖對讓變動和原圖對比，看看怎么變的，也不深究了。。。

再來看看縮放函數transform:scale(2); 放大兩倍（看到沒，放大了是視覺上的，並不擠占兄弟和父級的空間）

1             .box1 {
2                 width: 200px; height: 100px; background-color: #FF9900;
3                 transition: 0.5s;
4             }
5             .box1:hover {
6                 /* scale括號里只能是正數或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>

還有一個函數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             }

5.變形基點transform-origin

上面說到的旋轉、平移，縮放，其實都有個基點（可以理解為變形中未動的點，先用釘子將該點釘起來，然后完成變形，釘的點不同，變形后新位置當然也不一樣！），默認的是正中心位置（重心），上圖表明下基點是什么，如下：

基點在左上角和中心進行旋轉的話，區別如下圖

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;
/*
默認：transform-origin:50% 50% 0
JS中：object.style.transformOrigin="20% 40%"
*/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3中的變形處理——transform功能（旋轉、縮放、傾斜、移動） CSS基礎 transform屬性的基本使用移動旋轉縮放【Unity】6.4 Transform--移動、旋轉和縮放游戲對象 CSS3 skew傾斜、rotate旋轉動畫 iOS transform解決連續多次旋轉縮放，實現圖片旋轉縮放效果 HTML5 - 用CSS3動畫制作場景切換效果（移動，旋轉，淡入淡出等） CSS3 transform 屬性(2D,3D旋轉) css3傾斜樣式 CSS3的2D 轉換——旋轉，縮放，translate()，skew()，matrix() 2d旋轉（css3實現過度效果和動畫效果）