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

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

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

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属性结合使用,以创建具有圆角的旋转元素。但是,请记住,应用属性的顺序会影响最终结果。

最新教學 更多>
  • 如何將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-29
  • JavaScript計算兩個日期之間天數的方法
    JavaScript計算兩個日期之間天數的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    程式設計 發佈於2025-04-29
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-04-29
  • 查找當前執行JavaScript的腳本元素方法
    查找當前執行JavaScript的腳本元素方法
    如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中,開發人員可能需要將其他腳本動態加載其他腳本。但是,如果Head Element尚未完全渲染,則使用document.getElementsbytagname('head')[0] .appendChild(v)的常規方...
    程式設計 發佈於2025-04-29
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-04-29
  • MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    在兩個條件下插入或更新或更新 solution:的答案在於mysql的插入中...在重複鍵更新語法上。如果不存在匹配行或更新現有行,則此功能強大的功能可以通過插入新行來進行有效的數據操作。如果違反了唯一的密鑰約束。 實現所需的行為,該表必須具有唯一的鍵定義(在這種情況下為'名稱'...
    程式設計 發佈於2025-04-29
  • Java數組中元素位置查找技巧
    Java數組中元素位置查找技巧
    在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中,允許您使用indexof方法。 (primitives)(鏈接到Mishax的解決方案) 用於排序陣列的數組此方法此方法返回元素的索引,如果發現了元素的索引,或一個負值,指示應放置元素的插入點。
    程式設計 發佈於2025-04-29
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-04-29
  • Python不會對超範圍子串切片報錯的原因
    Python不會對超範圍子串切片報錯的原因
    在python中用索引切片範圍:二重性和空序列索引單個元素不同,該元素會引起錯誤,切片在序列的邊界之外沒有。 這種行為源於索引和切片之間的基本差異。索引一個序列,例如“示例” [3],返回一個項目。但是,切片序列(例如“示例” [3:4])返回項目的子序列。 索引不存在的元素時,例如“示例” [9...
    程式設計 發佈於2025-04-29
  • Android如何向PHP服務器發送POST數據?
    Android如何向PHP服務器發送POST數據?
    在android apache httpclient(已棄用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    程式設計 發佈於2025-04-29
  • PHP與C++函數重載處理的區別
    PHP與C++函數重載處理的區別
    作為經驗豐富的C開發人員脫離謎題,您可能會遇到功能超載的概念。這個概念雖然在C中普遍,但在PHP中構成了獨特的挑戰。讓我們深入研究PHP功能過載的複雜性,並探索其提供的可能性。 在PHP中理解php的方法在PHP中,函數超載的概念(如C等語言)不存在。函數簽名僅由其名稱定義,而與他們的參數列表無關...
    程式設計 發佈於2025-04-29
  • 如何有效地轉換PHP中的時區?
    如何有效地轉換PHP中的時區?
    在PHP 利用dateTime對象和functions DateTime對象及其相應的功能別名為時區轉換提供方便的方法。例如: //定義用戶的時區 date_default_timezone_set('歐洲/倫敦'); //創建DateTime對象 $ dateTime = ne...
    程式設計 發佈於2025-04-29
  • 如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求模擬瀏覽器行為,以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header,以提供有效的用戶 - 設置,該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...
    程式設計 發佈於2025-04-29
  • 如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤?
    如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤?
    揭開神秘:content Security Policy Directive errors 遇到Enigmatic錯誤“拒絕加載腳本...此問題源於內容安全策略(CSP)指令,該指令限制了不受信任來源的資源加載。 However, resolving this challenge can be s...
    程式設計 發佈於2025-04-29
  • 為什麼在我的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-29

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

Copyright© 2022 湘ICP备2022001581号-3