Home > Article > Web Front-end > css transform transform

css transform transform

高洛峰Original: 2016-11-17 14:11:231184browse

transition: transition property

transition-property specifies the name of the css attribute that sets the transition effect. The default can be written as all

transition-duration specifies how many seconds or milliseconds it takes to complete the transition effect

transition-timing-function: default easetransition-delay : Delay time

ease: Gradually slow down

linear: Uniform speed

ease-in: Accelerate

ease-out: Decelerate

ease-in-out: Accelerate first and then decelerate

cubic-bezier: Bezier Er curve

transitionend: over completion event

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);
}

Note: 1. In the transition, if you write more than one, the event will be triggered once without changing the style
　 2. Pay attention to triggering the transitionend event repeatedly. For example, the following repeatedly changes the y-axis position of the div

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

css transform transform

transform: deformation

rotation: rotate(): degree

skew: skew(): degree

skewX

skewY　

scale: scale() : Positive numbers, negative numbers, decimals

scaleX

scaleY

Displacement: translate(): All units supported by css can be used

translateX

translateY (2) rotate(50deg); Perform rotation first, and then perform scaling

The value of the above transform will also change according to the center point (transform-origin)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css3 animation monitoring and pausingNext article：css3 animation monitoring and pausing

See more

css transform transform

Related articles