首頁 web前端 html教學 CSS3-Transform_html/css_WEB-ITnose

CSS3-Transform_html/css_WEB-ITnose

Jun 24, 2016 am 11:19 AM

Transform-变形

CSS3 2D Transform

translate() //移动rotate() //旋转scale() //缩放skew()  //扭曲matrix()  //矩阵变形
登入後複製

translate() 移动:将HTML元素在x-y轴平面上做位移,且不会影响到其他元素

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)

translateX(x)仅水平方向移动(X轴移动)

translateY(y)仅垂直方向移动(Y轴移动)

例:

-webkit-transform: translate(20px,20px); /*Webkit内核浏览器:Safari and Chrome*/-moz-transform: translate(20px,20px);  /*Mozilla内核浏览器*/-o-transform: translate(20px,20px);  /*Opera*/-ms-transform:translate(20px,20px);  /*IE9*/transform: translate(20px,20px);  /*W3C标准*/
登入後複製

rotate() 旋转

需先有transform-origin属性的定义。transform-origin定义的是旋转的基点

如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

如:

transform:rotate(30deg);
登入後複製

scale() 缩放

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)

scaleX(x)元素仅水平方向缩放(X轴缩放)

scaleY(y)元素仅垂直方向缩放(Y轴缩放)

但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置

缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小

如:

transform:scale(1.5,1.3)
登入後複製

skew() 扭曲,斜切变换

skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)

skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)

skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

如:

transform:skewX(30deg)
登入後複製

transform:skewY(10deg)
登入後複製

matrix() 矩阵变形

transform: matrix(a,b,c,d,tx,ty);
登入後複製

本质上scale、skew、rotate、translate的效果都是通过matrix实现的,tx、ty表示位移量,matrix方法更详细的介绍可以参考这里:理解CSS3 transform中的Matrix(矩阵)

改变元素基点transform-origin

transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px

其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom

支持transform浏览器

IE9以下不支持

CSS3 3D Transform

3D Transform,与2D Transform相比,它给HTML元素在x-y平面加上了z轴

translate3d(tx,ty,tz):他定义了一个3D的位移方法,增加了z轴的偏移量translateZ(tz):这个方法只在Z轴偏移,与translateX()和translateY()相似scale3d(sx,sy,sz):在原有的scale方法上增加了z轴的参数scaleZ(sz):同理,只放大z轴,与scaleX()和scaleY()类似rotate3d(rx,ry,rz):将元素以给定参数的某一个轴方向旋转rotateX(angle),rotateY(angle)和rotateZ(angle):只按照某一个轴旋转,rotate3d(1,0,0,30deg)相当于rotateX(30deg),其他类推。
登入後複製

激活元素的3D空间,需要perspective属性,写法有两种:

transform: perspective( 600px );perspective: 600px;
登入後複製

写法 transform:perspective(600px) 适用于单个元素,会对每一个元素做3D视图的变换

而 perspective:600px 的写法,需写在父元素上,然后以父元素的视角,对多个子元素进行3D变换,多个子元素共享同一个3D空间

perspective的参数值,决定了3D效果的强烈程度,可以想象为距离多远去观察元素。值越大,观察距离就越远,同样的旋转值,看起来效果就弱一些;值越小,距离越近,3D效果就更强烈。

perspective-orgin

同样,对一个元素进行3D变换的时候,变换点都是元素的中心点,如果你想以其他的位置为变换点,那就可以用这个属性来做调整;

transform-style

这个参数用来共享父元素的3D空间;

transform-style有两个值,一个是默认的flat;一个是preserve-3d

backface-visibility

backface-visibility 属性可用于隐藏内容的背面。默认情况下,背面可见,这意味着即使在翻转后,变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时,旋转后内容将隐藏,确保只有正面可见

CSS3 3D Transform 理解详见:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

参考资料:

http://www.w3cplus.com/content/css3-transform

http://beiyuu.com/css3-animation/

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles