網頁|你不知道的HTML——transform

2021-01-11 算法與編程之美

問題描述

在之前寫的如何列印用六邊形組合的蜂窩狀圖形的博客中，有簡單的提到transform標籤。但是對於這個屬性的值，並沒有怎麼簡介。今天就來學習了解一下transform標籤吧！

解決方案

Transform的意思是使什麼改變形態; 使什麼改變外觀(或性質); 使改觀等。在HTML中，我們可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理。

Transform常見的屬性包括：rotate、 skew、scale、translate 。需要注意的就是這些屬性還有x軸、y軸的區分，比如：rotatex() 和 rotatey()。當我們使用transform對元素進行旋轉、縮放、傾斜、移動時，我們需要考慮transform的優先級。即rotate，scale，skew，translate。

圖2.1

下面就來了解一下這四個屬性：

（1）rotate（旋轉）用法：transform: rotate(xxdeg)。

單位deg為單位度的意思，正數為順時針旋轉，負數為逆時針旋轉，。

（2）scale（縮放）用法：transform: scale(0.5)；transform: scale(0.5, 2)。

這裡的參數表示縮放倍數。一個參數時表示水平和垂直同時縮放該倍率

兩個參數時第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。

（3）skew（傾斜）用法：transform: skew(30deg)； transform: skew(30deg, 30deg)。

參數表示傾斜角度，單位為deg。一個參數時：表示水平方向的傾斜角度。兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

需要特別提醒的是skew的默認原點transform-origin是這個圖像的中心點。但是圖像的中心點（基準點）是可以改變的。用法是transform-origin: 10px 10px。表示相對左上角原點的距離。第一個參數表示相對左上角原點水平方向的距離，第二個參數表示相對左上角原點垂直方向的距離。兩個參數除了可以設置為具體的像素值，其中第一個參數可以指定為left、center、right，第二個參數可以指定為top、center、bottom。

（4）translate（移動）用法：transform: translate(45px) ；transform: skew(45px, 150px)。參數表示移動距離。一個參數時：表示水平方向的移動距離。兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。

結語

Html相對於其他的程序語言是要簡單些。但是了解容易，精通難。不論對待任何學習的東西，我們都要認真對待。

END

主 編 | 張禎悅

責 編 | 劉 連

where2go 團隊

微信號：算法與編程之美

相關焦點

  • title是什麼意思_HTML網頁標籤_SEO標題優化
    html示例：簡單的html網頁框架<html><head><title>標題</title></head>><body>內容</body></html>二、title形式tltle標籤成對出現在網站源文件內保存網站網頁出現的文件名就是網站title標籤內的文字顯示在瀏覽器的標題欄搜尋引擎抓取頁面，了解頁面信息，
  • 網頁中怎樣插入多個空格?html空格符號代碼!
    今天介紹網頁中插入多個空格的方法，即html空格符號代碼，希望對大家有用！關於在網頁中插入多個空格是html中很基礎的一個知識點，相信學過html的都會，那今天為什麼要介紹這個呢？因為很多人（包括我）要用的時候都把html空格符號代碼忘了。
  • 如何用文本做一個簡單的HTML網頁
    見到許許多多的個性網頁，有沒有想過自己做一個漂亮的網頁。小編教大家用文本製作一個簡單的靜態網頁。首先我們在桌面點擊右鍵找到新建。然後點擊新建中的文本文檔這時候桌面會多出一個文件，我們可以對它進行命名、修改等操作。現在我們雙擊進入修改。
  • 網頁Meta標籤的用法總結
    需要顯示工具欄和菜單欄時，不需要添加，默認值為no，即正常顯示。如果content設置為yes，Web應用會以全屏模式運行，可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。
  • 滾動視差讓你不相信「眼見為實」
    說的簡單點就是，滾動屏幕時，網頁中元素的位置會發生變化。但是不同的元素位置變化的速度不同，導致網頁中產生分層元素的錯覺。看完上面這段，相信你對視差滾動的概念已經有了一個初步的了解。下面讓我們先來看一下如何用 css 來實現視差滾動。
  • 看過來,手把手教你
    舉一個最直白的例子：比如要在網頁中顯示文字：「我是我，你是你，她是她」，在正常的情況下，網頁中就是存在這幾個字，爬蟲當然可以爬取。我們要實現的效果是，讓這幾個字不存在，網頁源碼中可能是：但是在網頁中可以正常顯示：但是卻不可複製，複製後，全部或部分內容將不能正常顯示：2、字體防破解單純的字體加密，是不太難被破解的，因為上述的「密文亂碼符號」，其實也就是一種對應關係，例如：「A」對應「啊」，「B」對應「不」。只要獲得足夠的對應關係，替換就可以破解還原出原內容。
  • 「css基礎」如何理解transform的matrix()用法
    開篇實現炫酷的網頁動畫效果，自然少不了css3中transform的屬性，此屬性功能豐富且強大，比如實現元素的位移translate(x,y)，縮放scale(x,y)，2d旋轉rotate(angle)，傾斜變換skew(x-angle,y-angle)等，利用這些屬性可以實現基本的動畫效果，如果你要實現自定義和像素級別控制的高級動畫效果，我們還需要深入了解它的另外一個屬性
  • Html基礎:簡介、結構、標籤
    當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。Html概念    1：html (Hyper   Text    Markup   Language )   中文譯為「超文本標記語言」，主要是通過html標記對網頁中的文本，圖片，聲音等內容進行描述
  • 理解transform中的matrix
    css裡的默認變換中心是對象中心,transform-origin可以指定變換中心，我猜測是先平移到原點進行變換，再平移回原位置，如果你知道答案請告訴我。二維縮放 指定固定點，只縮放不改變位置，我猜測也是先平移，縮放，再平移。
  • CSS3 transform之scale縮放|transition之過渡動畫調整手記
    哥知道這是css3可以實現的功能。試為之。既然是滑鼠移上去後再發生變化，那首先需在css文件中，針對圖片的hover增加個樣式，縮放比例為1.1。如下：.index-list-tu li a img:hover {-webkit-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}懷著憧憬，查看變化。結果：動態是有了，只是動作太迅猛，不平滑，感覺很突兀。
  • Pandas transform函數
    其中，transform()在處理行或列時非常有用。我們想知道「每一家餐廳在本市的銷售額佔比是多少」。預期輸出為：在這個計算中最棘手的部分是，我們需要得到一個城市的總銷售額，並將其合併到數據中，以得到百分比。
  • HTML入門基礎
    HTML是HyperText Markup Language的簡寫，中文稱之為超文本標記語言，是一種用於創建網頁的標準標記語言。超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。
  • HTML文檔的元素分析之一
    上節中在講這種語言的特徵時講過，標籤是用來描述網頁的。瀏覽器讀取HTML文檔，識別標籤，並按標籤要求以網頁進行顯示文本。大部分標籤都是成隊出現的。起始標籤和結束標籤之間的所有文本，都叫做元素。元素這東西，比較抽象，我們可以把它且當作一個對象來理解，例如工作簿對象，每個工作簿的名稱都不一樣（屬性），每個工作簿裡面都有工作表（子元素），每個表都有名稱（屬性），裡面填寫的內容也不一樣（元素的內容）。
  • 什麼是HTML?介紹甚至初學者的理解
    HTML是網頁本身。您現在正在查看的文章也是用HTML編寫的。如果您選擇一個項目，如「查看原始碼」從通過右鍵單擊瀏覽器窗口出來的菜單，你可以看到如下圖所示的圖正在瀏覽的網頁的HTML原始碼。每個網頁都包含這樣的HTML原始碼。
  • pdf保存為網頁可以嗎?pdf格式文件要怎麼轉換成網頁文件?
    pdf格式文件要怎麼轉換成網頁文件？說到html，很多小夥伴似懂非懂。其實，這是一種超文本標記語言，頁面內包含有圖片、音樂、連結等很多非文本元素。有時候，特別是網際網路程式設計師，工作中要將其他格式文件（例如pdf）轉html格式網頁。
  • CSS網頁布局基礎教程
    DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS網頁布局教程</title> <style> body { margin: 0; } /* 頭部樣式 */ .
  • HTML(HyperText Markup Language)簡介
    HTML 是用來描述網頁的一種語言。完全可以一點不懂HTML的知識就可以做出網頁。支持不同數據格式的文件鑲入，書寫完畢它需要瀏覽器把其內容解釋出來（就是我們所瀏覽的各種網頁）。它由主體部分（Body）和頭部分（Head）組成，HTML是網絡的通用語言，它允許網頁製作者建立文字與圖片相結合的複雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什麼類型的電腦或瀏覽器。<html></html> 創建一個超文本標記語言文檔。
  • HTML之絕對路徑與相對路徑
    路徑指文件存放的位置，在網頁中利用路徑可以引用文件，插入圖像、視頻等。表示路徑的方法有兩種：相對路徑，絕對路徑。以下討論均是在HTML環境下進行。相對路徑相對路徑是指目標相對於當前文件的路徑，網頁結構設計中多採用這種方法來表示目標的路徑。相對路徑有多種表示方法，其表示的意義不盡相同。
  • 前端基礎系列——HTML(1)
    主要包括結構、表現和行為三個方面      結構標準：結構用於對網頁元素進行整理和分類，主要包括XML和HTML兩個部分      樣式標準：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指是CSS       行為標準：行為是指網頁模型的定義及交互的編寫，主要包括DOM和EC2.HTML初識
  • 與WebGL一起遇見網頁的未來
    最重要的是，它不需要任何插件並且跨瀏覽器/跨平臺支持（http://ubisoft.azurewebsites.net/）。 如果你不了解3D圖形編程，你可以先了解下基本概念，1個3D渲染場景至少需要這幾個元素：一個需要渲染的對象，一個用來呈現對象的攝像機和一束燈光來讓攝像機可以「看」到對象。最基本的BabylonJS 示例：HTML<!