CSS Transform

SS 在您可以修改的內容方面非常強大，并且該transform屬性是最通用和最強大的 CSS 屬性之一。在本文中，我將介紹使用transform屬性修改 CSS 元素的所有方法。

什么是變換屬性？

CSS 中的transform屬性只是一種您可以在一個屬性中旋轉、縮放、移動等元素的方式。由于這種靈活性，如果起初使用起來可能會令人困惑，但本文將消除所有這些困惑。

.class {
  transform: rotate(90deg) scale(2) translate(100px, 200px);
}

transform通過組合多個變換函數來獲得所需的輸出，因此為了理解transform您需要了解每個transform函數。

rotate

可能最容易理解的變換函數是rotate. 此函數采用單個參數，即旋轉元素的角度。正值將導致順時針旋轉，負值將導致逆時針旋轉。

.red {
  transform: rotate(10deg);
}
.green {
  transform: rotate(-45deg);
}
.blue {
  transform: rotate(.25turn);
}

正如您在上面的示例中看到的，我們使用deg和turn單位來定義我們的旋轉。deg單位從 0 到 360，而turn單位從 0 到 1。

3D 旋轉

rotateX您還可以使用、rotateY和rotateZ函數進行 3D 旋轉。該rotateZ功能的工作原理與rotate.

rotateX將在水平軸上rotateY旋轉一個元素，并將在垂直軸上旋轉一個元素。這些可用于翻轉元素。

.red {
  transform: rotateX(60deg);
}
.green {
  transform: rotateY(60deg);
}
.blue {
  transform: rotateX(.2turn) rotateY(.2turn);
}

如您所見，我們在 3D 空間中旋轉元素，使其看起來被擠壓。這種旋轉實際上只在處理 3D 元素時才有用。

scale

scale是另一個很容易理解的函數。它可以采用一個或兩個參數來確定元素大小的縮放比例。大于 1 的數字會使元素變大，而小于 1 的數字會縮小元素。

.red {
  transform: scale(1.25);
}
.green {
  transform: scale(.5);
}
.blue {
  transform: scale(1.25, .75);
}

當一個參數被傳遞給scale它時，它會根據傳遞的數字縮放 X 和 Y 軸相同的量。當兩個值傳遞給scale第一個數字時，將縮放 X 軸，第二個數字將縮放 Y 軸。

此外，如果您愿意，可以使用scaleXandscaleY函數來縮放 X 或 Y 軸。這些函數采用一個參數并在相應軸上縮放元素。

3D 比例

就像rotate您可以在 3D 中縮放一樣。為此，您將使用與 and 類似的函數scaleZ，但用于 Z 軸。這同樣只對 3D 元素有用。scaleX``scaleY

translate

可能我最喜歡的轉換元素的方法是使用translate函數。這個函數像scale函數一樣接受一個或兩個參數，并將根據提供的值移動一個元素。

.red {
  transform: translate(25px);
}
.green {
  transform: translate(-25px, 25px);
}
.blue {
  transform: translate(0, -25px);
}

透明的彩色箭頭表示形狀通常放置的位置，而不透明的箭頭表示它們在平移后的位置。

你會注意到，當只有一個值被傳遞給它時，translate它只會影響 X 軸，因此元素向右移動 25 個像素，因為它是一個正值。

當將兩個值傳遞給translate第一個值時，會在 X 軸上移動元素，而第二個值會影響 Y 軸的位置。這意味著綠色箭頭向左移動 25 個像素，向下移動 25 個像素。正 Y 值將元素向下移動似乎令人困惑，因為我們通常認為正 Y 意味著向上，但在 Web 開發中，正 Y 值意味著元素在頁面中向下移動。

最后，藍色箭頭向上移動了 25 個像素，因為第一個參數設置為 0，第二個參數設置為負 25 個像素。

就像 scale 一樣，有一個translateX和translateY函數可以一次只在一個方向上移動一個元素。

百分比translate

該translate屬性處理百分比的方式與幾乎所有其他 CSS 屬性不同，因為它基于元素的大小而不是其父級的大小。

.red {
  transform: translate(100%);
}

正如你所看到的，當我們用百分比平移時，我們將元素向右移動了其自身寬度的 100%。這對于通過將元素移動其自身寬度的 50% 或將元素彼此偏移其大小的百分比來使元素居中非常有用。

3D translate

您現在可能已經猜到了，但translate也可以在 3D 中使用。您可以使用translateZ僅修改 Z 軸的函數或translate3D類似的函數translate，但接受第三個參數來在 Z 軸上移動元素。同樣，這僅對 3D 元素有用。

偏斜

可能所有transform功能中最沒用的是skew. 它允許您通過傾斜形狀的邊緣來拉伸形狀。該skew函數接受一兩個參數，就像translate.

.red {
  transform: skew(25deg);
}
.green {
  transform: skew(15deg, 25deg);
}
.blue {
  transform: skew(-15deg, -25deg);
}

如您所見，skew 屬性在 X 和 Y 方向上拉伸了我們的形狀。通過指定一個參數，我們只在 X 方向上傾斜，而如果我們傳遞兩個屬性，第一個在 X 方向上傾斜，第二個在 Y 方向上傾斜。

此外，就像translate您可以使用skewX和skewY在一個方向上傾斜元素而不影響其他方向一樣。

3D 傾斜

不同的是，所有其他transform屬性skew都沒有任何 3D 版本。

組合變換

到目前為止，我們已經討論了單獨使用轉換，但是如果您想使用多個轉換怎么辦？這實際上非常簡單，因為您可以傳遞任意數量的函數transform。

.red {
  transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
  transform: rotate(-.5turn) translateX(-10%);
}
.blue {
  transform: scaleX(1.2) scaleY(.8);
}

組合轉換變得困難的唯一時候是當您想要在不同的類中修改它們時。

.base-class {
  transform: scale(1.2) translateX(5px);
}
.big {
  transform: scale(2) translateX(5px);
}
.move {
  transform: scale(1.2) translateX(100px);
}
.big.move {
  transform: scale(2) translateX(100px);
}

由于transform是一個屬性，您需要在修改的每個類之間復制所有值，transform因為如果您只是transform: scale(2)在.big類中寫入，它將覆蓋整個transform而不只是scale部分。幸運的是，我們可以巧妙地使用 CSS 變量來解決這個問題。

.base-class {
  transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
  --scale: 2;
}
.move {
  --translate-x: 100px;
}

如您所見，我們現在只更改 CSS 變量，而從未修改實際transform屬性。

結論

總體而言，CSStransform非常有用，同時也非常易于理解。到目前為止，最難的部分transform是理解如何跨不同類組合多個變換，但在 CSS 變量的幫助下，這個問題是微不足道的。

ransform變形

transform在字面上就是變形、改變之意。

CSS3的transform主要包括rotate(旋轉)、skew(扭曲)、scale(縮放)和translate(移動)以及matrix(矩形變形)。

rotate使用格式:(取值范圍0-360, 單位deg)

rotate(10deg)

rotate(360deg)

rotateX(angle) 定義沿著 X 軸的 3D 旋轉。

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。

角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg

【實例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圖片轉換演示</title>
<style type="text/css">
img{
    width:460px;
    height:480px;
    border-radius:50%;
    transition:1s;
}
/*
過渡到···deg,而不是過渡···deg
*/
img:hover{
    /*transform: rotate(45deg);*/
    transform: rotateX(45deg);/*沿著x軸旋轉*/
    transform: rotateY(45deg);/*沿著y軸旋轉*/
    transform: rotateZ(45deg);/*沿著z軸旋轉*/

    /*正數順時針*/
    transform: rotate(45deg);/*z軸*/
    /*負數逆時針*/
    transform: rotate(-45deg);/*z軸*/

}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>

transform-origin: 設置旋轉元素的基點位置

實例2: 旋轉基點

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
    height: 220px;
    display: block;
    margin: 100px auto;

    transition: 1s linear;

    /*我們的旋轉基點默認是中心*/
    /*規定旋轉基點的
    * ①方位名詞left top bottom right center
    * ②px(注意坐標原點為左上角)
    * ③%(參考的是寬高)*/
    transform-origin: center center;
    transform-origin: right top;
    transform-origin: -300px 110px;
    transform-origin: 150px 110px;
    transform-origin: 50% 50%;
    transform-origin: 100% 100%;

}
body:hover>img{
    transform: rotateX(45deg);/*沿著x軸旋轉*/
    transform: rotateY(45deg);/*沿著y軸旋轉*/
    transform: rotateZ(45deg);/*沿著z軸旋轉*/
    transform: rotate(360deg);/*z軸*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

skew使用格式:(取值范圍0-180, 單位deg)

skew(10deg,10deg)

skew(180deg,180deg)

實例: 斜切

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}

img:hover{
    transform: skewX(45deg);
    transform: skewX(-45deg);
    transform: skewY(45deg);
    transform: skewY(-45deg);

    /*skew(x軸斜切角度,y軸斜切角度)*/

    /*skew(x,y)同步動畫*/
    /*transform: skew(45deg,45deg);*/


    /*現在x斜切基礎之上再進行y斜切*/
    transform: skewX(45deg) skewY(45deg);
    transform: skewY(45deg) skewX(45deg);

}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

scale使用格式：

scale(0.2)

scale(2)

scale(2,3)

scale(0.5,2)

實例: 縮放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}
img:hover{
    transform: scale(1);/*本身*/
    transform: scale(2);/*擴大*/
    transform: scale(0.5);/*擴大*/
    transform: scale(-1);/*倒立*/
    transform: scale(-2);/*倒立放大2倍*/
    transform: scale(-0.5);/*倒立縮小1半*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

translate使用格式：

translate(10px)

translate(20px,20px)

translate(-25px,-25px)

實例: 平移

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
    width: 400px;
    display: block;
    margin: 100px auto;
    transition: 1s;
}

img:hover{
    transform: translateX(100px);
    transform: translateX(-100px);
    transform: translateY(100px);
    transform: translateY(-100px);
    transform: translate(100px,100px);


    /*%參考的是各自的寬和高*/
    transform: translateX(100%);
    transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

綜合使用: 旋轉、斜切、縮放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    margin: 100px auto;
    background-color: orange;

    transition: 1s;
}
div:hover{
    /*transform: rotate(360deg);
    transform: skew(45deg);*/

    /*綜合使用*/
    transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3新增特性都不會對盒子模型產生影響, 盒子模型大概永遠是由width/height+padding+border+marign組成

例

旋轉 div 元素：

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

}

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

屬性
transform (2D)	36.04.0 -webkit-	10.09.0 -ms-	16.03.5 -moz-	9.03.2 -webkit-	23.015.0 -webkit-10.5 -o-
transform (3D)	36.012.0 -webkit-	12.0	10.0	16.010.0 -moz-	9.04.0 -webkit-

屬性定義及使用說明

Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

為了更好地理解Transform屬性,請查看在線實例.

默認值：	none
繼承：	no
版本：	CSS3
JavaScript 語法：	object.style.transform="rotate(7deg)"

語法

transform: none|transform-functions;

值	描述
none	定義不進行轉換。
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)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
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 傾斜轉換。
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n)	為 3D 轉換元素定義透視視圖。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：JavaScript HTML DOM
下一篇：網易有道X6Pro、步步高V6、阿爾法蛋T20、科大

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商