」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在CSS中使用2D變換功能

如何在CSS中使用2D變換功能

發佈於2025-02-17
瀏覽:568

How to Use 2D Transformation Functions in CSS

摘录自Tiffany新书《CSS大师,第二版》

CSS变换功能赋予我们创造其他方法无法实现的效果和交互的能力。结合过渡和动画,我们可以创建旋转、舞动和缩放的元素和界面。特别是三维变换,可以模拟物理对象。本文将探讨二维变换函数(三维函数在此处介绍)。

主要有四种二维变换函数:旋转、缩放、倾斜和位移。另外六个函数允许我们沿单个维度变换元素:scaleX 和 scaleY;skewX 和 skewY;以及 translateX 和 translateY。

关键要点

  • CSS中的四个主要二维变换函数是rotate、scale、skew和translate。这些函数使我们能够创建其他方法无法实现的效果和交互,包括旋转、舞动和缩放的元素和界面。
  • rotate()函数围绕变换原点(transform-origin)按指定角度旋转元素。可以顺时针或逆时针旋转。scale函数可以增加或减少元素在X维度、Y维度或两者上的大小。translate函数按指定距离偏移元素的绘制位置与其布局位置的距离。
  • 变换函数可以组合起来创建更复杂的变换。但是,应用这些函数的顺序很重要,因为它会显著改变结果。这是因为浏览器将每个函数的矩阵相乘以创建一个新矩阵。
  • 最新版本的CSS变换规范向CSS添加了translate、rotate和scale属性。这些属性的工作方式与其对应的变换函数非常相似,但值是空格分隔的,而不是逗号分隔的。这允许从其他变换中单独管理旋转、平移或缩放变换。但是,对这些属性的浏览器支持仍然有限。

rotate()

旋转变换围绕变换原点(transform-origin)按指定角度旋转元素。使用rotate()可以顺时针(正角度值)或逆时针(负角度值)倾斜元素。其效果很像风车或风轮,如下所示。

How to Use 2D Transformation Functions in CSS rotate()函数接受角度单位的值。角度单位由CSS值和单位模块级别3定义。这些可能是deg(度)、rad(弧度)、grad(梯度)或turn单位。一次完整的旋转等于360deg、6.28rad、400grad或1turn。

除非进行动画或过渡,否则超过一次旋转的旋转值(例如,540deg或1.5turn)将根据其余值进行渲染。换句话说,540deg的渲染效果与180deg(540度减去360度)相同,1.5turn的渲染效果与.5turn(1.5 – 1)相同。但是,从0deg到540deg或从1turn到1.5turn的过渡或动画将使元素旋转一倍半。

二维缩放函数:scale、scaleX和scaleY

使用缩放函数,我们可以增加或减少元素在X维度(scaleX)、Y维度(scaleY)或两者(scale)上的渲染大小。缩放如下图所示,其中边框表示框的原始边界, 号表示其中心点。

How to Use 2D Transformation Functions in CSS 每个缩放函数都接受一个乘数或因子作为其参数。这个乘数几乎可以是任何正数或负数。不支持百分比值。大于1的正乘数会增加元素的大小。例如,scale(1.5)将元素在X和Y方向上的大小增加1.5倍。介于0和1之间的正乘数将减小元素的大小。

小于0的值也会导致元素的大小缩放或减小,并创建反射(翻转)变换。

警告:使用scale(0)将导致元素消失,因为将数字乘以零的结果为零。

使用scale(1)创建恒等变换,这意味着它被绘制到屏幕上时就像没有应用缩放变换一样。使用scale(-1)不会改变元素的绘制大小,但负值将导致元素被反射。即使元素没有显示变换,它仍然会触发新的堆叠上下文和包含块。

可以使用scale函数分别缩放X和Y维度。只需传递两个参数:scale(1.5, 2)。第一个参数缩放X维度;第二个参数缩放Y维度。例如,我们可以使用scale(-1, 1)沿X轴单独反射一个对象。传递单个参数将按相同的因子缩放两个维度。

二维平移函数:translateX、translateY和translate

平移元素会按指定距离偏移其绘制位置与其布局位置的距离。与其他变换一样,平移元素不会改变其offsetLeft或offsetTop位置。但是,它会影响它在屏幕上的视觉位置。

每个二维平移函数(translateX、translateY和translate)都接受长度或百分比作为参数。长度单位包括像素(px)、em、rem和视口单位(vw和vh)。

translateX函数改变元素的水平渲染位置。如果元素距左侧0像素,则transform: transitionX(50px)将其渲染位置向其起始位置右侧移动50像素。类似地,translateY改变元素的垂直渲染位置。transform: transitionY(50px)的变换将元素垂直偏移50像素。

使用translate(),我们可以使用单个函数垂直和水平移动元素。它最多接受两个参数:X平移值和Y平移值。下图显示了具有translate(120%, -50px)变换值的元素的效果,其中左侧绿色正方形位于原始位置,右侧绿色正方形与其包含元素(虚线边框)水平平移120%和垂直平移-50px。

How to Use 2D Transformation Functions in CSS 向translate传递单个参数等效于使用translateX;Y平移值将设置为0。使用translate()是更简洁的选择。应用translate(100px, 200px)等效于translateX(100px) translateY(200px)。

正平移值将元素移动到右侧(对于translateX)或向下(对于translateY)。负值将元素移动到左侧(translateX)或向上(translateY)。

平移对于将项目向左、向右、向上或向下移动特别有用。更新left、right、top和bottom属性的值会强制浏览器重新计算整个文档的布局信息。但是,变换是在计算布局之后计算的。它们会影响元素在屏幕上的显示位置,但不会影响其实际尺寸。是的,将文档布局和渲染视为单独的概念很奇怪,但在浏览器方面,它们确实是单独的。

变换属性可能会出现在您附近的浏览器中

最新版本的CSS变换规范向CSS添加了translate、rotate和scale属性。变换属性的工作方式与其对应的变换函数非常相似,但值是空格分隔的,而不是逗号分隔的。例如,我们可以使用rotate属性表达transform: rotate3d(1, 1, 1, 45deg):rotate: 1 1 1 45deg。类似地,translate: 15% 10% 300px在视觉上与transform: translate3d(15%, 10%, 300px)相同,scale: 1.5 1.5 3与transform: scale3d(1.5, 1.5, 3)相同。使用这些属性,我们可以单独管理旋转、平移或缩放变换,而不是其他变换。

在撰写本文时,对变换属性的浏览器支持仍然非常稀疏。Chrome和Samsung Internet开箱即用地支持它们。在Firefox 60及更高版本中,支持隐藏在一个标志后面;访问about:config并将layout.css.individual-transform.enabled设置为true。

skew、skewX和skewY

倾斜变换会改变点之间的角度和距离,同时保持它们在同一平面上。倾斜变换也称为剪切变换,它们会扭曲元素的形状,如下所示,其中虚线表示元素的原始边界框。

How to Use 2D Transformation Functions in CSS 倾斜函数(skew、skewX和skewY)接受大多数角度单位作为参数。度、梯度和弧度是倾斜函数的有效角度单位,而turn单位(也许很明显)不是。

skewX函数在X方向或水平方向上剪切元素(见下图)。它接受一个参数,该参数必须是角度单位。正值将元素向左移动,负值将元素向右移动。

How to Use 2D Transformation Functions in CSS 类似地,skewY在Y方向或垂直方向上剪切元素。下图显示了transform: skewY(30deg)的效果。原点右侧的点将随着正值的增加而向下移动。负值将这些点向上移动。

How to Use 2D Transformation Functions in CSS 这就引出了skew函数。skew函数需要一个参数,但最多可以接受两个参数。第一个参数在X方向上倾斜元素,第二个参数在Y方向上倾斜元素。如果只提供一个参数,则第二个值假定为零,使其等效于仅在X方向上倾斜。换句话说,skew(45deg)的渲染效果与skewX(45deg)相同。

当前变换矩阵

到目前为止,我们已经分别讨论了变换函数,但它们也可以组合起来。想要缩放和旋转对象吗?没问题:使用变换列表。例如:

.rotatescale {
    transform: rotate(45deg) scale(2);
}

这会产生如下所示的结果。

How to Use 2D Transformation Functions in CSS 使用变换函数时,顺序很重要。这一点最好用图示说明,所以让我们来看一个例子来说明。以下CSS会倾斜和旋转一个元素:

.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}

它给出了如下所示的结果。

How to Use 2D Transformation Functions in CSS 如果你先旋转元素,然后倾斜它会发生什么?

.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}

效果(如下所示)大相径庭。

How to Use 2D Transformation Functions in CSS 每个变换都有一个不同的当前变换矩阵,该矩阵由其变换函数的顺序创建。要完全理解原因,我们需要学习一些矩阵乘法。这也有助于我们理解matrix和matrix3d函数。

矩阵乘法和矩阵函数

矩阵是一个数字或表达式的数组,排列在一个矩形的行和列中。所有变换都可以使用4×4矩阵表示,如下所示。

How to Use 2D Transformation Functions in CSS 此矩阵对应于matrix3d函数,该函数接受16个参数,每个参数对应于4×4矩阵的一个值。二维变换也可以使用3×3矩阵表示,如下所示。

How to Use 2D Transformation Functions in CSS 此3×3矩阵对应于matrix变换函数。matrix()函数接受六个参数,每个参数对应于值af

每个变换函数都可以使用矩阵和matrix或matrix3d函数来描述。下图显示了scale3d函数的4×4矩阵,其中sxsysz分别是X、Y和Z维度的缩放因子。

How to Use 2D Transformation Functions in CSS 当我们组合变换(例如transform: scale(2) translate(30px, 50px))时,浏览器会将每个函数的矩阵相乘以创建一个新矩阵。这个新矩阵就是应用于元素的矩阵。

但是矩阵乘法就是这样:它不是可交换的。对于简单的值,3×2的乘积与2×3的乘积相同。但是,对于矩阵,A×B的乘积不一定与B×A的乘积相同。让我们来看一个例子。我们将计算transform: scale(2) translate(30px, 50px)的矩阵乘积。

How to Use 2D Transformation Functions in CSS 我们的元素已按比例缩放了两倍,然后水平平移60像素,垂直平移100像素。我们也可以使用matrix函数表示此乘积:transform: matrix(2, 0, 0, 2, 60, 100)。现在让我们切换这些变换的顺序,即transform: translate(30px, 50px) scale(2)。结果如下所示。

How to Use 2D Transformation Functions in CSS 请注意,我们的对象仍然按比例缩放了两倍,但在这里它水平平移了30像素,垂直平移了50像素。使用matrix函数表示,这是transform: matrix(2, 0, 0, 2, 30, 50)。

还值得注意的是,继承的变换函数与变换列表类似。每个子变换都乘以应用于其父级的任何变换。例如,考虑以下代码:

这与以下内容的渲染效果相同:

在这两种情况下,p元素的当前变换矩阵都是相同的。尽管我们到目前为止一直关注二维变换,但上述内容也适用于三维变换。第三维增加了深度的错觉。它还在新的函数和属性的形式下带来了一些额外的复杂性。

关于CSS中二维变换函数的常见问题

CSS中有哪些不同类型的二维变换函数?

CSS中有多种类型的二维变换函数。这些包括translate()、rotate()、scale()、skew()和matrix()。每个函数都允许您以不同的方式操作元素。例如,translate()函数将元素从其当前位置移动,而rotate()函数围绕给定点旋转元素。scale()函数更改元素的大小,skew()函数沿X轴和Y轴扭曲元素。matrix()函数将所有这些变换组合成一个。

如何在CSS中使用translate()函数?

CSS中的translate()函数用于将元素从其当前位置移动。它有两个参数:X轴值和Y轴值。例如,如果要将元素向右移动50像素,向下移动20像素,则可以使用以下代码:transform: translate(50px, 20px);。这将移动元素到新位置,而不会影响页面上其他元素的布局。

我可以在CSS中组合多个二维变换函数吗?

是的,您可以在CSS中组合多个二维变换函数。为此,只需在transform属性中列出每个函数,并用空格分隔即可。例如,如果您想将元素缩放至其两倍大小,然后将其旋转45度,则可以使用以下代码:transform: scale(2) rotate(45deg);。变换按列出的顺序应用。

CSS中matrix()函数的用途是什么?

CSS中的matrix()函数是一个非常强大的变换函数,允许您同时执行多个变换。它有六个参数,代表2×3矩阵的值。此矩阵用于执行缩放、旋转、倾斜和平移变换的组合。虽然它比其他变换函数更复杂,但它提供了对变换过程的高度控制。

CSS中skew()函数是如何工作的?

CSS中的skew()函数用于沿X轴和Y轴扭曲元素。它有两个参数:X轴的倾斜角度和Y轴的倾斜角度。例如,如果您想沿X轴将元素倾斜30度,沿Y轴倾斜20度,则可以使用以下代码:transform: skew(30deg, 20deg);。这将扭曲元素,产生一种倾斜效果。

我可以在CSS中对任何HTML元素使用二维变换函数吗?

是的,您可以在CSS中对任何HTML元素使用二维变换函数。这包括块级元素(如div)和内联元素(如span)。但是,请记住,变换的应用方式可能会因元素的类型及其在布局中的位置而异。

如果我不为CSS中的translate()函数指定单位会发生什么?

如果您不为CSS中的translate()函数指定单位,则这些值将被视为像素值。这意味着transform: translate(50, 20);等效于transform: translate(50px, 20px);。但是,通常最好始终指定单位,以确保清晰性和一致性。

如何在CSS中动画化二维变换?

您可以使用transition属性在CSS中动画化二维变换。此属性允许您指定过渡的持续时间、计时函数和延迟。例如,如果您想在2秒内动画化旋转,则可以使用以下代码:transition: transform 2s; transform: rotate(45deg);。这将在指定的持续时间内平滑地动画化旋转。

CSS中rotate()和skew()函数有什么区别?

CSS中的rotate()和skew()函数都以不同的方式操作元素。rotate()函数围绕给定点旋转元素,而skew()函数沿X轴和Y轴扭曲元素。这意味着rotate()会更改元素的方向,而skew()会更改元素的形状。

我可以在CSS中将二维变换函数与其他CSS属性一起使用吗?

是的,您可以在CSS中将二维变换函数与其他CSS属性一起使用。例如,您可以将transform属性与border-radius属性结合使用,以创建具有圆角的旋转元素。但是,请记住,应用属性的顺序会影响最终结果。

最新教學 更多>
  • 為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    程式設計 發佈於2025-04-08
  • Python讀取CSV文件UnicodeDecodeError終極解決方法
    Python讀取CSV文件UnicodeDecodeError終極解決方法
    在試圖使用已內置的CSV模塊讀取Python中時,CSV文件中的Unicode Decode Decode Decode Decode decode Error讀取,您可能會遇到錯誤的錯誤:無法解碼字節 在位置2-3中:截斷\ uxxxxxxxx逃脫當CSV文件包含特殊字符或Unicode的路徑逃...
    程式設計 發佈於2025-04-08
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-04-08
  • 為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    mySQL錯誤#1089:錯誤的前綴鍵錯誤descript [#1089-不正確的前綴鍵在嘗試在表中創建一個prefix鍵時會出現。前綴鍵旨在索引字符串列的特定前綴長度長度,可以更快地搜索這些前綴。 了解prefix keys `這將在整個Movie_ID列上創建標準主鍵。主密鑰對於唯一識...
    程式設計 發佈於2025-04-08
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-04-08
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本編號的替代方法,它是使用以下語法:獲取最新版本:未壓縮)While these legacy URLs still remain in use, it is recommended ...
    程式設計 發佈於2025-04-08
  • 如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    在Visual Studio 2012 儘管已安裝了MySQL Connector v.6.5.4,但無法將MySQL數據庫添加到實體框架的“ DataSource對話框”中。為了解決這一問題,至關重要的是要了解MySQL連接器v.6.5.5及以後的6.6.x版本將提供MySQL的官方Visual...
    程式設計 發佈於2025-04-08
  • 如何配置Pytesseract以使用數字輸出的單位數字識別?
    如何配置Pytesseract以使用數字輸出的單位數字識別?
    Pytesseract OCR具有單位數字識別和僅數字約束 在pytesseract的上下文中,在配置tesseract以識別單位數字和限制單個數字和限制輸出對數字可能會提出質疑。 To address this issue, we delve into the specifics of Te...
    程式設計 發佈於2025-04-08
  • 如何使用替換指令在GO MOD中解析模塊路徑差異?
    如何使用替換指令在GO MOD中解析模塊路徑差異?
    在使用GO MOD時,在GO MOD 中克服模塊路徑差異時,可能會遇到衝突,其中3個Party Package將另一個PAXPANCE帶有導入式套件之間的另一個軟件包,並在導入式套件之間導入另一個軟件包。如迴聲消息所證明的那樣: go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    程式設計 發佈於2025-04-08
  • 為什麼不````''{margin:0; }`始終刪除CSS中的最高邊距?
    為什麼不````''{margin:0; }`始終刪除CSS中的最高邊距?
    在CSS 問題:不正確的代碼: 全球範圍將所有餘量重置為零,如提供的代碼所建議的,可能會導致意外的副作用。解決特定的保證金問題是更建議的。 例如,在提供的示例中,將以下代碼添加到CSS中,將解決餘量問題: body H1 { 保證金頂:-40px; } 此方法更精確,避免了由全局保證金重置...
    程式設計 發佈於2025-04-08
  • 如何使用node-mysql在單個查詢中執行多個SQL語句?
    如何使用node-mysql在單個查詢中執行多個SQL語句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    程式設計 發佈於2025-04-08
  • 為什麼PHP的DateTime :: Modify('+1個月')會產生意外的結果?
    為什麼PHP的DateTime :: Modify('+1個月')會產生意外的結果?
    使用php dateTime修改月份:發現預期的行為在使用PHP的DateTime類時,添加或減去幾個月可能並不總是會產生預期的結果。正如文檔所警告的那樣,“當心”這些操作的“不像看起來那樣直觀。 ; $ date->修改('1個月'); //前進1個月 echo $ date->...
    程式設計 發佈於2025-04-08
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-04-08
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-04-08
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。要解決此問題並確保在後續頁面訪問中執行腳本,Firefox用戶應設置一個空功能。 警報'); }; alert('inline Alert')...
    程式設計 發佈於2025-04-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3