CSS之Transform_html/css_WEB-ITnose
我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。
本文使用的是标准的transform，亦可以使用各个浏览器对应私有的属性。对应如下
- -webkit-transform
- -moz-transform
- -o-transform
不过在我的电脑上用transform效果相同，Chrome 49 Firefox 46 IE 10
一、旋转(rotate)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: rotate(90deg); } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>语法格式如下：
rotate(angle)
旋转角度单位有：
- deg 指角度制,一周的角度是360°,直角是90°
- grad 指百分度制,一周的角度是400,直角是100
- turn 圈, 1turn代表旋转一圈
- rad 指弧度制,一周的角度是2π,直角是π/2
转换比例为： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
二、缩放(scale)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: scale(1,-1) } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>语法格式如下：
scale(number,[number2])
number2是可选的，如果未设置，则与默认与number相同。number可以为正数、负数、小数。
我们将number分为两部分，正负号(+,-)和数值(number的绝对值)。负号(-)意味着元素要被旋转180度，数值部分大于1则放大，小于一则缩小，等于一既不放大又不缩小，为零时消失。
三、移动(translate)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: translate(2in,5cm) } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>语法格式如下：
translate(value1,[value2])
第一个参数表示相对于原位置X轴偏移距离，第二个参数表示相对于Y轴偏移个距离，如果省略了第二个参数，则默认为0。正数向右和下偏移，负数向左和上偏移。
距离的单位有：
- 绝对长度单位
- px
- in
- cm
- mm
- 相对字体长度单位
- em
- rem
- pt
- pc
- ex
- ch
- 可视区百分比长度单位
- vw
- vh
- vmin
- vmax
- 离奇的长度单位
- %(百分比)
关于这些长度单位，这有一篇很好的介绍链接http://www.w3cplus.com/css/the-lengths-of-css.html，本段也是参照此链接，不过提示大家，浏览器的版本也在不断的迭代，有些特性需要自己去验证，比如vmax属性在我的chrome浏览器下也行正常运行。
四、倾斜(skew)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: skew(30deg,-0.1turn) } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>语法格式：
skew(angle,[angle])
第一个参数表示相对于X轴进行倾斜，第二个参数相对于Y轴进行倾斜，如果省略了第二个参数，则默认为0。
rotate函数只是旋转，不改变元素的形状，但skew函数会改变元素的形状。
五、变形
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: matrix(1,0.4,0,1,0,0) } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>matrix()函数是一个3x3的矩阵，将旧的参数转换成新的参数。
目前，我对此也不是很了解，大家如有兴趣自行Google。
六、Transform-origin
CSS变形的原点默认是对象的中心点，如果要改变这个中心点，可以使用transform-origin属性进行定义。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ /*以左上角为原点旋转*/ transform-origin: top left; transform: rotate(30deg); } </style></head><body> <img src="/static/imghw/default1.png" data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download" class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>语法格式：
transform-origin:[ [
transform-origin属性的初始值是50%,50%，使用与块状元素和内联元素。transform-origin接受连个参数，他们可以是百分比、em、px等具体值也可以是left、center、right，或者top、middle、bottom等描述性关键字。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
