2D 轉換

来源:https://www.cnblogs.com/cherry0420/archive/2023/05/25/17429066.html
-Advertisement-
Play Games

1.轉換 轉換(transform)是CSS3中具有顛覆性的特征之一,可以實現元素的位移、旋轉、縮放等效果。 轉換(transform)可以簡單理解為變形。 移動:translate 旋轉:rotate 縮放:scale 1.1 二維坐標系 2D轉換是改變在二維平面上的位置和形狀的一種技術。 1.2 ...


1.轉換

轉換(transform)是CSS3中具有顛覆性的特征之一,可以實現元素的位移、旋轉、縮放等效果。

轉換(transform)可以簡單理解為變形。

移動:translate

旋轉:rotate

縮放:scale

1.1 二維坐標系

2D轉換是改變在二維平面上的位置和形狀的一種技術。

1.2 2D 轉換之移動 translate

2D移動是2D轉換裡面的一種功能,可以改變元素在頁面中的位置,類似定位

語法

transform: translate(x,y);或者分開寫

transform: translateX(n);

transform: translateY(n);

重點

(1)定義2D轉換中的移動,沿著X和Y軸移動元素。

(2)translate最大的優點:不會影響到其他元素的位置。

(3)translate中的百分比單位是相對於自身元素的translate: (50%,50%);

(4)對行內標簽沒有效果。

1.3 2D轉換之旋轉 rotate

2D轉換指的是讓元素在二維平面內順時針旋轉或者逆時針旋轉。

語法

transform: rotate(度數)

重點

(1)rotate裡面跟度數,單位是deg

(2)角度為正時,順時針,負時,為逆時針。

(3)預設旋轉的中心點是元素的中心點。

1.4 2D轉換中心點 transform-origin

設置轉換點為中心點。

語法

transform-origin: x y;

重點

(1)註意後面的參數x和y用空格隔開。

(2)x y預設轉換的中心點是元素的中心點(50% 50%)。

(3)還可以給x y設置像素或者方位名詞(top bottom left right center)。

1.5 2D轉換之縮放scale

縮放,顧名思義,可以放大和縮小。只要給元素添加上了這個屬性就能控制它放大還是縮小。

語法

transform: scale(x,y);

註意

(1)註意其中的x和y用逗號分隔。

(2)transform: scale(1,1):寬和高都放大一倍,相對於沒有放大。

(3)transform: scale(2,2):寬和高都放大兩倍。

(4)transform: scale(2):只寫一個參數,第二個參數則和第一個參數一樣,相當於scale(2,2)。

(5)transform: scale(0.5,0.5):縮小。

(6)scale縮放最大的優勢:可以設置轉換中心點縮放,預設以中心點縮放的,則不影響其他盒子。

1.6 2D轉換綜合寫法

註意:

1. 同時使用多個轉換,其格式為:transform: translate()rotate()scale()…等。

2. 其順序會影響轉換效果。(先選轉會改變坐標軸方向)。

3. 當我們同時有位移和其他屬性的時候,記得要將位移放到最前面。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...
  • > 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在業務中,有這麼一種場景,表格下的某一列 ID 值,文本超長了,正常而言會是這樣: 通常,這種情況都需要超長省略溢出打點,那麼,就會變成這樣: 但是,這種展示有個缺點,3 個 ID 看上去就完全一致了,因此,PM 希望能夠實現頭部省略打點 ...
  • 隨著項目的發展,前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢,導致日常的維護難度日益增加。同時前端技術的發展迅猛,導致功能擴展吃力,重構成本高,穩定性低。因此前端微服務應運而生。 ...
  • 1. 動畫 動畫(animation)是CSS3中具有顛覆性的特征之一,可以通過設置都各節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過度,動畫可以實現更多變化,更多控制,連續自動播放等效果。 1.1 動畫的基本使用 製作動畫分為兩步: (1)先定義動畫。 (2)再使用(調用)動畫 ...
  • Iframe是一個歷史悠久的HTML元素,根據MDN WEB DOCS官方介紹,Iframe定義為HTML內聯框架元素,表示嵌套的Browsing Context,它能夠將另一個HTML頁面嵌入到當前頁面中。Iframe可以廉價實現跨應用級的頁面共用,並且具有使用簡單、高相容性、內容隔離等優點,因此... ...
  • 比如老王我,用npm init新建一個包,改把改把,然後來個npm publish,so easy ✌️!Too young too naive, baby
  • 在 CSS 中,存在許多數學函數,這些函數能夠通過簡單的計算操作來生成某些屬性值,例如 : * calc():用於計算任意長度、百分比或數值型數據,並將其作為 CSS 屬性值。 * min() 和 max():用於比較一組數值中的最大值或最小值,也可以與任意長度、百分比或數值型數據一同使用。 * c ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...