Home >Web Front-end >CSS Tutorial >Detailed introduction to css transform transform property

Detailed introduction to css transform transform property

高洛峰Original: 2017-03-20 16:28:321886browse

transition: transitionproperty

##transition-property specifies the css property for setting the transition effect The name, by default you can write all
##transition-duration specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function: default easetransition-delay: delay time

transitionend：overcompletion

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

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

Detailed introduction to css transform transform property

transform：Transformation

Rotation: rotate(): Degree
Bevel: skew(): Degree

Scaling: scale(): positive numbers, negative numbers, decimals

Displacement: translate(): All units supported by css are acceptable

Execution order of transform: Those written last are executed first

The above transform The value will also change based on the center point (transform-origin)

The above is the detailed content of Detailed introduction to css transform transform property. For more information, please follow other related articles on the PHP Chinese website!

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：CSS layout flex implements div cross arrangement and bottom alignment methodNext article：CSS layout flex implements div cross arrangement and bottom alignment method

See more

Detailed introduction to css transform transform property

transition: transitionproperty

Related articles