Utiliser la transformation CSS3, la transition, l'animation et l'analyse des attributs associés

1. Transformation

transformation : vous pouvez faire pivoter, mettre à l'échelle, traduire, incliner et déformer la matrice sur les objets éléments.
Exemple :

<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>

transition : attribut de transition

transition : nom de l'attribut css de l'effet de transition durée de l'effet de transition effet de vitesse Vitesse ​​heure de début de l'effet de transition de courbe ;

<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() : élément de rotation spatiale bidimensionnelle.

Si l'élément a une valeur de perspective définie, rotate3d() peut être utilisé pour réaliser une rotation dans un espace tridimensionnel.

<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([,]) : Mouvement, qui est la quantité de déplacement.

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

skew() : biais

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

matrice(a,c,e,b,d,f) : Déformation matricielle, les valeurs de c et e sont représentées par des valeurs sinus ou cosinus.

a : représente scaleX(); mise à l'échelle de l'axe X
c : inclinaison de l'axe Y
e : inclinaison de l'axe Xb : scaleY(); mise à l'échelle de l'axe Y
d: translationX() Mouvement de l'axe X
f: translationY() Mouvement de l'axe Y

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

perspective() : perspective

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

2. Transition

transition-propriété : propriétés excessives

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

durée de transition : temps de transitiondélai de transition : temps de retard, lorsqu'il s'agit d'un nombre négatif, l'action de transition commencera à s'afficher à partir de ce moment, et l'action précédente sera tronquée .
Fonction de synchronisation de transition : effet de transition, facilité par défaut.

<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

animation-name : nom de l'animation, doit être utilisé en conjonction avec la règle @keyframes, car le le nom de l'animation est représenté par la définition d'images clés @, si plusieurs valeurs d'attribut sont fournies, séparez-les par des virgules.

@keyframes est équivalent à un espace de noms, suivi d'un nom Si le nom de l'animation dans la classe définit le nom correspondant, l'animation peut être exécutée. Lors de la définition d'une animation, vous pouvez utiliser directement les mots-clés from et to pour passer d'un état à un autre.

<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-durée : temps d'animation

animation-timing-function : méthode de lecture, les valeurs sont les suivantes :

facilité : effet de facilité, équivalent à la fonction cubique-bézier (0.25,0.1,0.25,1.0), c'est-à-dire cubique Bézier. linéaire : effet linéaire
ease-in : effet de fondu en sortie
ease-out : effet de fondu en sortie
ease-in-out : effet de fondu en sortie
step-start : sauter maintenant, accédez à l'état final de l'animation
step-end : conservez l'état de début de l'animation. Lorsque le temps d'exécution de l'animation est terminé, passez immédiatement à l'état final de l'animation
step([,[start | end]]?) : le numéro du premier paramètre est le nombre d'intervalles spécifié, c'est-à-dire que l'animation est divisée en n étapes pour un affichage progressif. Le deuxième paramètre est par défaut end, ce qui définit l'état de la dernière étape, le début est l'état à la fin, et la fin est. l'état au début. Si défini avec animation- L'effet des conflits de mode de remplissage et le paramètre animation-fill-mode est l'état final de l'animation.
cubic-bezier(,,,) : effet spécial de courbe de zebel cubique

animation-delay : démarrer le temps de lecture

animation- iteration-count : Le nombre de lectures. Lorsque la valeur est infinie, cela signifie une lecture en boucle infinie

animation-direction : La valeur est : .

normal : direction normaleinverse : l'animation se déroule en sens inverse, la direction est toujours similaire à la normale
alternative : l'animation avancera et inversera alternativement le mouvement

animation-fill- mode : L'état après la lecture, valeur :

aucun : Valeur par défaut, aucun paramètre État au début les deux : Après la fin, vous peut suivre les deux règles d'avant et d'arrière
animation-play-state : Récupérer ou définir l'état de l'animation de l'objet, valeur :
en cours d'exécution : Par défaut, mouvement
paused : Pause


4. Attributs associés

transform-origin : Origine de la transformation, point de référence de la transformation, par défaut le point central de l'élément. Il y a deux paramètres, le premier paramètre est l'abscisse et le paramètre deux est l'ordonnée.

pourcentage : utilisez le pourcentage pour spécifier la valeur des coordonnées, peut être négatif

longueur : utilisez la longueur pour spécifier la valeur des coordonnées, peut être négatif

gauche centre droit : valeur de la direction horizontalehaut centre bas : valeur de direction verticale


perspective-prigin : origine de la perspective, définie sur l'axe X et l'axe Y de l'élément 3D, permettant la position basse de la 3D élément à modifier. Lors de la définition de cet attribut, il s'agit d'un élément enfant d'un élément, de la perspective, et non de l'élément lui-même.

Remarque : cet attribut doit être utilisé avec l'attribut perspective, qui n'affecte que les éléments transformés en 3D.

Valeurs : pourcentage, longueur, gauche, centre, droite, haut, centre, bas

backface-visibility : Masquer le dos du contenu, le dos est visible par défaut, inversé Le contenu après la transformation est toujours visible Lorsque la visibilité de la face arrière est définie sur masquée, le contenu sera masqué après la rotation et la face avant ne sera plus visible après la rotation.

Valeurs : visible, cachée

transform-style : rendu 3D, définit la manière dont les éléments incorporés sont rendus dans l'espace 3D. Il existe deux valeurs : flat : tous les éléments enfants sont rendus dans un plan 2D
. préserver-3d : Préserver l'espace 3D

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!