css變形 transform-css教學-PHP中文網

css變形 transform

高洛峰

發布： 2016-11-17 14:11:23

原創

1225 人瀏覽過

transition：過度屬性

transition-property 規定設定過度效果的css屬性的名稱，預設可以寫all

transition-duration 規定完成過度效果需要多少秒或毫秒

transition-timing-function: 預設easetransition-delay ：延時時間

ease:逐漸變慢

linear:勻速

ease-in:加速

ease-out:減速

ease-in-out:先加速在滑輪

-bezier爾曲線

transitionend：過度完成事件

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事件。例如下面重複改變div的y軸位置 css變形 transform

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

登入後複製

transform：變形

旋轉：rotate()：度數

斜切：skew()：度數

skewX

。：正數、負數、小數

scaleX

scaleY

位移：translate()：css支援的單位都可以

translateX

translateY　的先寫完後寫『 (2) rotate(50deg);　先執行旋轉，在執行縮放

以上transform的值，也會根據中心點（transform-origin）來改變