Maison >interface Web >tutoriel CSS >Introduction détaillée à la propriété de transformation CSS Transform
Introduction détaillée à la propriété de transformation CSS Transform
- 高洛峰original
- 2017-03-20 16:28:321887parcourir
transition : Transition attribut
transition-property spécifie la propriété CSS pour définir le effet de transition Le nom peut être écrit par défaut all
transition-duration spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition
fonction de synchronisation de transition : facilité par défautdélai de transition : temps de retard
facilité : ralentir progressivement
linéaire : vitesse constante
ease-in : accélérer
-
facilité -sortie : ralentir
facilité d'entrée-sortie : accélérer d'abord puis décélérer
cubique-bézier : courbe de Bézier
fin de transition : Surachèvement de l'événement
function addEnd(obj,fn){
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件 2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
</style>
</head>
<body>
<div id="nav"></div>
<script>
var oHome=document.getElementById("nav");
var count = 10;
oHome.onclick = function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
addEnd(this,function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
})
}
function addEnd(obj,fn) {
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>
transformation : déformation
rotation : rotation() : degré
Skew : skew() : Degré
skewX
skewY
Echelle : scale() : nombres positifs, nombres négatifs, décimales
scaleX
scaleY
Déplacement : traduire() : Toutes les unités prises en charge par CSS peuvent être utilisées
traduireX
translateY >
- transformation : échelle (2) rotation (50 deg ); Effectuez d'abord la rotation, puis effectuez la mise à l'échelle
-
-
- La valeur de la transformation ci-dessus changera également en fonction du point central (transformation-origine)
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!