整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS 在您可以修改的內(nèi)容方面非常強大，并且該transform屬性是最通用和最強大的 CSS 屬性之一。在本文中，我將介紹使用transform屬性修改 CSS 元素的所有方法。
CSS 中的transform屬性只是一種您可以在一個屬性中旋轉(zhuǎn)、縮放、移動等元素的方式。由于這種靈活性，如果起初使用起來可能會令人困惑，但本文將消除所有這些困惑。
.class {
transform: rotate(90deg) scale(2) translate(100px, 200px);
}
transform通過組合多個變換函數(shù)來獲得所需的輸出，因此為了理解transform您需要了解每個transform函數(shù)。
可能最容易理解的變換函數(shù)是rotate. 此函數(shù)采用單個參數(shù)，即旋轉(zhuǎn)元素的角度。正值將導(dǎo)致順時針旋轉(zhuǎn)，負值將導(dǎo)致逆時針旋轉(zhuǎn)。
.red {
transform: rotate(10deg);
}
.green {
transform: rotate(-45deg);
}
.blue {
transform: rotate(.25turn);
}
正如您在上面的示例中看到的，我們使用deg和turn單位來定義我們的旋轉(zhuǎn)。deg單位從 0 到 360，而turn單位從 0 到 1。
rotateX您還可以使用、rotateY和rotateZ函數(shù)進行 3D 旋轉(zhuǎn)。該rotateZ功能的工作原理與rotate.
rotateX將在水平軸上rotateY旋轉(zhuǎn)一個元素，并將在垂直軸上旋轉(zhuǎn)一個元素。這些可用于翻轉(zhuǎn)元素。
.red {
transform: rotateX(60deg);
}
.green {
transform: rotateY(60deg);
}
.blue {
transform: rotateX(.2turn) rotateY(.2turn);
}
如您所見，我們在 3D 空間中旋轉(zhuǎn)元素，使其看起來被擠壓。這種旋轉(zhuǎn)實際上只在處理 3D 元素時才有用。
scale是另一個很容易理解的函數(shù)。它可以采用一個或兩個參數(shù)來確定元素大小的縮放比例。大于 1 的數(shù)字會使元素變大，而小于 1 的數(shù)字會縮小元素。
.red {
transform: scale(1.25);
}
.green {
transform: scale(.5);
}
.blue {
transform: scale(1.25, .75);
}
當一個參數(shù)被傳遞給scale它時，它會根據(jù)傳遞的數(shù)字縮放 X 和 Y 軸相同的量。當兩個值傳遞給scale第一個數(shù)字時，將縮放 X 軸，第二個數(shù)字將縮放 Y 軸。
此外，如果您愿意，可以使用scaleXandscaleY函數(shù)來縮放 X 或 Y 軸。這些函數(shù)采用一個參數(shù)并在相應(yīng)軸上縮放元素。
就像rotate您可以在 3D 中縮放一樣。為此，您將使用與 and 類似的函數(shù)scaleZ，但用于 Z 軸。這同樣只對 3D 元素有用。scaleX``scaleY
可能我最喜歡的轉(zhuǎn)換元素的方法是使用translate函數(shù)。這個函數(shù)像scale函數(shù)一樣接受一個或兩個參數(shù)，并將根據(jù)提供的值移動一個元素。
.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 開發(fā)中，正 Y 值意味著元素在頁面中向下移動。
最后，藍色箭頭向上移動了 25 個像素，因為第一個參數(shù)設(shè)置為 0，第二個參數(shù)設(shè)置為負 25 個像素。
就像 scale 一樣，有一個translateX和translateY函數(shù)可以一次只在一個方向上移動一個元素。
該translate屬性處理百分比的方式與幾乎所有其他 CSS 屬性不同，因為它基于元素的大小而不是其父級的大小。
.red {
transform: translate(100%);
}
正如你所看到的，當我們用百分比平移時，我們將元素向右移動了其自身寬度的 100%。這對于通過將元素移動其自身寬度的 50% 或?qū)⒃乇舜似破浯笮〉陌俜直葋硎乖鼐又蟹浅Ｓ杏谩?/span>
您現(xiàn)在可能已經(jīng)猜到了，但translate也可以在 3D 中使用。您可以使用translateZ僅修改 Z 軸的函數(shù)或translate3D類似 的函數(shù)translate，但接受第三個參數(shù)來在 Z 軸上移動元素。同樣，這僅對 3D 元素有用。
可能所有transform功能中最沒用的是skew. 它允許您通過傾斜形狀的邊緣來拉伸形狀。該skew函數(shù)接受一兩個參數(shù)，就像translate.
.red {
transform: skew(25deg);
}
.green {
transform: skew(15deg, 25deg);
}
.blue {
transform: skew(-15deg, -25deg);
}
如您所見，skew 屬性在 X 和 Y 方向上拉伸了我們的形狀。通過指定一個參數(shù)，我們只在 X 方向上傾斜，而如果我們傳遞兩個屬性，第一個在 X 方向上傾斜，第二個在 Y 方向上傾斜。
此外，就像translate您可以使用skewX和skewY在一個方向上傾斜元素而不影響其他方向一樣。
不同的是，所有其他transform屬性skew都沒有任何 3D 版本。
到目前為止，我們已經(jīng)討論了單獨使用轉(zhuǎn)換，但是如果您想使用多個轉(zhuǎn)換怎么辦？這實際上非常簡單，因為您可以傳遞任意數(shù)量的函數(shù)transform。
.red {
transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
transform: rotate(-.5turn) translateX(-10%);
}
.blue {
transform: scaleX(1.2) scaleY(.8);
}
組合轉(zhuǎn)換變得困難的唯一時候是當您想要在不同的類中修改它們時。
.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是一個屬性，您需要在修改的每個類之間復(fù)制所有值，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;
}
如您所見，我們現(xiàn)在只更改 CSS 變量，而從未修改實際transform屬性。
總體而言，CSStransform非常有用，同時也非常易于理解。到目前為止，最難的部分transform是理解如何跨不同類組合多個變換，但在 CSS 變量的幫助下，這個問題是微不足道的。
ransform變形
transform在字面上就是變形、改變之意。
CSS3的transform主要包括rotate(旋轉(zhuǎn))、skew(扭曲)、scale(縮放)和translate(移動)以及matrix(矩形變形)。
rotate使用格式:(取值范圍0-360, 單位deg)
rotate(10deg)
rotate(360deg)
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg
【實例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圖片轉(zhuǎn)換演示</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軸旋轉(zhuǎn)*/
transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/
/*正數(shù)順時針*/
transform: rotate(45deg);/*z軸*/
/*負數(shù)逆時針*/
transform: rotate(-45deg);/*z軸*/
}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>transform-origin: 設(shè)置旋轉(zhuǎn)元素的基點位置
實例2: 旋轉(zhuǎn)基點
<!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;
/*我們的旋轉(zhuǎn)基點默認是中心*/
/*規(guī)定旋轉(zhuǎn)基點的
* ①方位名詞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軸旋轉(zhuǎn)*/
transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/
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);*/
/*現(xiàn)在x斜切基礎(chǔ)之上再進行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>綜合使用: 旋轉(zhuǎn)、斜切、縮放
<!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新增特性都不會對盒子模型產(chǎn)生影響, 盒子模型大概永遠是由width/height+padding+border+marign組成
例
旋轉(zhuǎn) div 元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| 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屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。
為了更好地理解Transform屬性,請查看 在線實例.
| 默認值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transform="rotate(7deg)" |
語法
transform: none|transform-functions;
| 值 | 描述 | |
|---|---|---|
| none | 定義不進行轉(zhuǎn)換。 | |
| 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) | 定義 2D 轉(zhuǎn)換。 | |
| 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]?) | 定義 2D 縮放轉(zhuǎn)換。 | |
| 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ī)定角度。 | |
| 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 傾斜轉(zhuǎn)換。 | |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 | |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 | |
| perspective(n) | 為 3D 轉(zhuǎn)換元素定義透視視圖。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
