Maison > Article > interface Web > 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:321831parcourir

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(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.addEventListener(&#39;transitionend&#39;,fn,false);
}
function removeEnd(obj,fn){
    obj.removeEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.removeEventListener(&#39;transitionend&#39;,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 = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        addEnd(this,function(){
            count += 20;
            oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        })
    }
    function addEnd(obj,fn) {
        obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
        obj.addEventListener(&#39;transitionend&#39;,fn,false);
    }
</script>
</body>
</html>

Introduction détaillée à la propriété de transformation CSS Transform

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 >

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：CSS layout flex implémente l'arrangement croisé div et la méthode d'alignement inférieurArticle suivant：CSS layout flex implémente l'arrangement croisé div et la méthode d'alignement inférieur

Articles Liés

Voir plus