Heim Web-Frontend HTML-Tutorial 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()  //矩阵变形
Nach dem Login kopieren

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标准*/
Nach dem Login kopieren

rotate() 旋转

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

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

如:

transform:rotate(30deg);
Nach dem Login kopieren

scale() 缩放

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

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

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

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

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

如:

transform:scale(1.5,1.3)
Nach dem Login kopieren

skew() 扭曲,斜切变换

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

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

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

如:

transform:skewX(30deg)
Nach dem Login kopieren

transform:skewY(10deg)
Nach dem Login kopieren

matrix() 矩阵变形

transform: matrix(a,b,c,d,tx,ty);
Nach dem Login kopieren

本质上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),其他类推。
Nach dem Login kopieren

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

transform: perspective( 600px );perspective: 600px;
Nach dem Login kopieren

写法 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/

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

See all articles