CSS3-Transform_html/css_WEB-ITnose
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/

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

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,

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.

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.

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

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

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

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

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
