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

css變形transform屬性詳細介紹

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

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(&#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>

transform：變形

#斜切：skew()：度數

#scaleX

scaleY

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

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

陳述：

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

上一篇：CSS版面配置flex實作div交叉排布與底部對齊方法下一篇：CSS版面配置flex實作div交叉排布與底部對齊方法

看更多