Werfen wir einen Blick auf die Transformations- und Übergangseffekte von Boxen mithilfe von CSS
WBOY
Freigeben: 2022-08-03 15:23:33
nach vorne
2676 Leute haben es durchsucht
Dieser Artikel vermittelt Ihnen relevantes Wissen übercss, das hauptsächlich Probleme im Zusammenhang mit Transformationen und Übergängen behandelt. Ich hoffe, dass es für alle hilfreich ist. 1) 1. translator(
[,
]): Geben Sie eine 2D-Übersetzung durch den Vektor [tx, ty] an, tx ist der erste Übergangswertparameter, ty ist der zweite Übergangswert Parameteroptionen. Wenn nicht angegeben, hat ty den Wert 0. Das heißt, translator(x,y), was bedeutet, dass das Objekt entsprechend dem eingestellten x-, y-Parameterwert verschoben wird. Wenn der Wert eine negative Zahl ist, wird das Objekt standardmäßig in die entgegengesetzte Richtung verschoben Der Mittelpunkt des Elements kann auch auf Basis des Transformationsursprungs erfolgen. Beispiel: transform:translate(100px,20px):
(2) translatorX(
): Geben Sie eine Übersetzung an, indem Sie eine Zahl in X-Richtung angeben. Verschieben Sie das Element nur in Richtung der x-Achse. Ebenso ist sein Basispunkt der Mittelpunkt des Elements. Sie können auch die Position des Basispunkts entsprechend dem Transformationsursprung ändern. Zum Beispiel: transform: Translate Bewegen Sie sich nur zur Y-Achse, der Basispunkt befindet sich im Mittelpunkt des Elements und die Position des Basispunkts kann durch Transformationsursprung geändert werden. Zum Beispiel: transform: TranslateY(20px):
2, Scale(x,y) Legen Sie die Boxskalierung fest
Skalierungsskalierung ist dem Verschieben von Übersetzen sehr ähnlich. Es gibt auch drei Situationen: Scale(x, y) bewirkt, dass das Element gleichzeitig horizontal und vertikal skaliert (d. h. die X-Achse und die Y-Achse skalieren gleichzeitig); ) Element skaliert nur vertikal (Y-Achsenskalierung), aber sie haben den gleichen Skalierungsmittelpunkt und die gleiche Basis. Der Mittelpunkt ist die Mittelposition des Elements. Die Skalierungsbasis ist 1. Wenn sein Wert größer als 1 ist Das Element wird vergrößert, andernfalls wird das Element verkleinert, wenn sein Wert kleiner als 1 ist. Werfen wir einen Blick auf die spezifische Verwendung dieser drei Situationen:
(1) scale(
[,
]): Stellt zwei Parameter zum Ausführen des Skalierungsvektors [sx, sy] zur Angabe eines 2D bereit Maßstab (2D-Skalierung). Wenn der zweite Parameter nicht angegeben wird, nimmt er denselben Wert wie der erste Parameter an. Scale(X,Y) wird zum Skalieren des Elements verwendet. Sie können den Basispunkt des Elements über transform-origin festlegen. Der Basispunkt befindet sich auch in der Mitte des Elements. und Y stellt das Vielfache der vertikalen Skalierung dar, und Y ist ein optionaler Parameter. Wenn der Y-Wert nicht festgelegt ist, bedeutet dies, dass die Skalierungsfaktoren in X- und Y-Richtung gleich sind. Und vorbehaltlich X. Beispiel: transform:scale(2,1.5):
(2) scaleX(
): Verwenden Sie den Skalierungsvektor [sx,1], um die Skalierungsoperation durchzuführen. sx ist der erforderliche Parameter. ScaleX bedeutet, dass das Element das Element nur entlang der X-Achse (horizontale Richtung) skaliert. Sein Basispunkt liegt ebenfalls in der Mitte des Elements durch transform-origin. Zum Beispiel: transform:scale ScaleY bedeutet, dass das Element das Element nur auf der Y-Achse (vertikale Richtung) skaliert und sein Basispunkt auch in der Mitte des Elements liegt. Sie können den Basispunkt des Elements durch Transformationsursprung ändern. Beispiel: transform:scaleY(2):
3, rotation(deg) legt die Boxdrehung fest.
rotate(
): Gibt eine 2D-Drehung (2D-Rotation) für das ursprüngliche Element durch an Für den angegebenen Winkelparameter muss zunächst das Attribut „transform-origin“ definiert werden. Transform-Origin definiert den Basispunkt der Drehung, wobei sich Winkel auf den Drehwinkel bezieht. Wenn der eingestellte Wert eine positive Zahl ist, bedeutet dies eine Drehung im Uhrzeigersinn. Wenn der eingestellte Wert eine negative Zahl ist, bedeutet dies eine Drehung gegen den Uhrzeigersinn. Zum Beispiel: transform:rotate(30deg):
*top left | left top 等价于 0 0 | 0% 0% *top | top center | center top 等价于 50% 0 *III、right top | top right 等价于 100% 0 *left | left center | center left 等价于 0 50% | 0% 50% *center | center center 等价于 50% 50%(默认值) *right | right center | center right 等价于 100% 50% *bottom left | left bottom 等价于 0 100% | 0% 100% *bottom | bottom center | center bottom 等价于 50% 100% *bottom right | right bottom 等价于 100% 100%
Nach dem Login kopieren
其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例
a { -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }
Nach dem Login kopieren
综合上述我们可以给transition一个速记法:transition:
如下图所示:
相对应的一个示例代码:
p { -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }
Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf die Transformations- und Übergangseffekte von Boxen mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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