Verwenden Sie CSS3-Transformation, Übergang, Animation und zugehörige Attributanalyse

1. Transformation

Transformation: Sie können die Matrix auf Elementobjekten drehen, skalieren, verschieben, neigen und verformen.
Beispiel:

<strong>transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);<br>/*矩阵变形*/<br>matrix(<number>,<number>,<number>,<number>,<number>,<number>);<br>/*透视*/<br>perspective(length);</strong>

Übergang: Übergangsattribut

Übergang: CSS-Attribut Name des Übergangseffekts Dauer des Übergangsgeschwindigkeitseffekts Geschwindigkeit Startzeit des Kurvenübergangseffekts;

<strong>transition: property duration timing-function delay;<br>/*示例*/<br>transition:1s ease all;<br>-webkit-tansition:1s ease all;<br>-moz-transition:1s ease all;<br>-o-transition:1s ease all;</strong>

rotate(): zweidimensionales Raumrotationselement.

Wenn für das Element ein perspektivischer Wert festgelegt ist, kann rotation3d() verwendet werden, um eine Drehung im dreidimensionalen Raum zu erreichen.

<strong>rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/<br>rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/<br>rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/</strong>

scale()

<strong>scaleX(<number>)/*只在X轴（水平方向）缩放元素*/<br>scaleY(<number>)/*只在Y轴（垂直方向）缩放*/<br>scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/</strong>

translate([,]): Bewegung, also das Ausmaß der Verschiebung.

<strong>translateX(<translation-value>);/*只在X轴（水平方向）移动*/<br>translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/<br>translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/</strong>

skew(): skew

<strong>skewX(<angle>);/*只在X轴（水平）倾斜*/<br>skewY(<angle>);/*只在Y轴（垂直）倾斜*/</strong>

matrix(a,c,e,b,d,f): Bei der Matrixverformung werden die Werte von c und e durch Sinus- oder Kosinuswerte dargestellt.

a: stellt die Skalierung der X-Achse dar
c: skewY(); 🎜>b: scaleY(); Y-Achsen-Skalierung
d: TranslateX() X-Achsen-Bewegung
f: TranslateY() Y-Achsen-Bewegung

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective(): Perspektive

<strong>.wrap{<br>    perspective:1000px; 
<br>}<br>.wrap .child{<br>    transform:perspective(1000px);<br>}</strong>

2. Transition

transition-eigenschaft: übermäßige Eigenschaften

<strong>transition-property:all;/*针对所有元素都有过度效果*/<br>transition-property:none;/*没有元素有过度效果*/<br>transition-property:ident;/*指定css属性有过度效果，例如width*/</strong>

Übergangsdauer: Übergangszeit

Übergangsverzögerung: Verzögerungszeit. Wenn es sich um eine negative Zahl handelt, wird die Übergangsaktion ab diesem Zeitpunkt angezeigt und die vorherige Aktion wird abgeschnitten . Übergangs-Timing-Funktion: Übergangseffekt, standardmäßige Leichtigkeit.

<strong>transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/<br>transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/<br>transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/<br>transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/<br>transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/<br>transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/</strong>

3. Animation

animationsname: Animationsname, muss in Verbindung mit der Regel @keyframes verwendet werden, da die Der Name der Animation wird durch die @-Keyframes-Definition dargestellt. Wenn mehrere Attributwerte bereitgestellt werden, trennen Sie diese durch Kommas.

@keyframes entspricht einem Namespace, gefolgt von einem Substantiv. Wenn der Animationsname in der Klasse den entsprechenden Namen definiert, kann die Animation ausgeführt werden. Beim Definieren einer Animation können Sie die Schlüsselwörter from und to direkt verwenden, um von einem Zustand in einen anderen zu wechseln.

<strong>.animation_name{<br>    left:0;<br>    top:100px;<br>    position: absolute;<br>    -webkit-animation: 0.5s 0.5s ease infinite alternate;<br>    -moz-animation: 0.5s 0.5s ease infinite alternate;<br>    -webkit-animation-name:demo;<br>    -moz-animation-name:demo;<br>}<br>@-webkit-keyframes demo{<br>    from{left:0;}<br>    to{left:400px;}<br>}<br>@-webkit-keyframes demo1{<br>    0%{left:0;}<br>    50%{left:200px;}<br>    100%{left:400px;}<br>}</strong>

animation-duration: Animationszeit

animation-timing-function: Wiedergabemethode, die Werte sind wie folgt:

ease: Ease-Effekt, äquivalent zur Kubik-Bezier-Funktion (0,25,0,1,0,25,1,0), also kubischer Bezier.

linear: linearer Effektease-in: Fade-out-Effekt
ease-out: fade-out-Effekt
ease-in-out: fade-out-Effekt
Step-Start: Sprung Gehen Sie jetzt zum Endzustand der Animation
step-end: Behalten Sie den Startzustand der Animation bei. Wenn die Animationsausführungszeit abgelaufen ist, springen Sie sofort zum Endzustand der Animation
step([,[start | end]]?): Die erste Parameternummer ist die angegebene Anzahl von Intervallen, d. h. die Animation ist für die phasenweise Anzeige in n Schritte unterteilt. Der zweite Parameter ist standardmäßig auf „Ende“ eingestellt, wodurch der Status „Start“ am Ende und „Ende“ festgelegt wird Zustand am Anfang. Wenn mit Animation festgelegt, ist die Auswirkung von Füllmoduskonflikten und die Einstellung von Animationsfüllmodus der Endzustand der Animation.
Cubic-Bezier(,,,): spezieller kubischer Zebel-Kurveneffekt

Animationsverzögerung: Wiedergabezeit starten

Animation- iteration-count: Die Anzahl der Wiedergaben. Wenn der Wert unendlich ist, bedeutet dies eine Endlosschleifenwiedergabe

animation-direction: Der Wert ist:

Normal: Normale Richtung

Umgekehrt: Die Animation läuft rückwärts, die Richtung ist immer ähnlich wie bei NormalAlternativ: Die Animation wechselt abwechselnd vorwärts und rückwärts

animation-fill- mode: Der Zustand nach der Wiedergabe, Wert:

none: Standardwert, keine Einstellung Zustand am Anfang

both: Nach dem Ende, zwei Regeln für Vorwärts und Rückwärts können befolgt werden animation-play-state: Status der Objektanimation abrufen oder festlegen, Wert:
running: Standard, Bewegung
paused: Pause



4. Zugehörige Attribute

transform-origin: Transformationsursprung, Referenzpunkt der Transformation, standardmäßig der Mittelpunkt des Elements. Es gibt zwei Parameter, Parameter eins ist die Abszisse und Parameter zwei ist die Ordinate.

Prozentsatz: Verwenden Sie den Prozentsatz, um den Koordinatenwert anzugeben, kann negativ seinLänge: Verwenden Sie die Länge, um den Koordinatenwert anzugeben, kann negativ sein

links in der Mitte rechts: horizontaler Richtungswert

oben Mitte unten: vertikaler Richtungswert


perspective-prigin: perspektivischer Ursprung, definiert auf der X-Achse und Y-Achse des 3D-Elements, der die untere Position des 3D ermöglicht Bei der Definition dieses Attributs handelt es sich um ein untergeordnetes Element eines Elements, der Perspektive, nicht um das Element selbst. Hinweis: Dieses Attribut muss zusammen mit dem Perspektiveattribut verwendet werden, das nur 3D-transformierte Elemente betrifft.

Werte: Prozentsatz, Länge, links, Mitte, rechts, oben, Mitte, unten

backface-visibility: Versteckt die Rückseite des Inhalts, die Rückseite ist sichtbar durch Standardmäßig invertiert: Der Inhalt ist nach der Transformation weiterhin sichtbar. Wenn die Sichtbarkeit der Rückseite auf „versteckt“ eingestellt ist, wird der Inhalt nach der Drehung ausgeblendet und die Vorderseite ist nach der Drehung nicht mehr sichtbar. Werte: sichtbar, versteckt

transform-style: 3D-Rendering, legt fest, wie eingebettete Elemente im 3D-Raum gerendert werden. Es gibt zwei Werte:

flach: alle untergeordneten Elemente werden in einer 2D-Ebene gerendert Preserve-3d: 3D-Raum bewahren

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3-Transformation, Übergang, Animation und zugehörige Attributanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!