首頁  >  文章  >  web前端  >  css變形transform屬性詳細介紹

css變形transform屬性詳細介紹

高洛峰
高洛峰原創
2017-03-20 16:28:321831瀏覽

transition:過度屬性

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

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

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

    • ease:逐漸變慢

    • linear:勻速

    • ease-in:加速

    • ease-out:減速

    • ease-in-out:先加速在減速

    • cubic-bezier:貝塞爾曲線

css變形transform屬性詳細介紹

  •  transitionend:過度完成

    事件
  • 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 = &#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
    • #skewY  
    縮放:scale():正數、負數、小數
  • #scaleX

    • scaleY

#################################################### ############位移:translate():css支援的單位都可以##################translateX####### #####translateY  #########################transform的執行順序:後寫的先執行############ ########transform: scale(2) rotate(50deg); 先執行旋轉,在執行縮放############## #######以上transform的值,也會根據中心點(transform-origin)來改變###### ###

以上是css變形transform屬性詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn