Rumah > Artikel > hujung hadapan web > css变形 transform

css变形 transform

高洛峰asal: 2016-11-17 14:11:231236semak imbas

transition：过度属性

transition-property 规定设置过度效果的css属性的名称，默认可以写all

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

transition-timing-function: 默认easetransition-delay：延时时间

ease:逐渐变慢

linear:匀速

ease-in:加速

ease-out:减速

ease-in-out:先加速在减速

cubic-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轴位置

<!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）来改变

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css3动画监听以及暂停Artikel seterusnya：自适应居中

Artikel berkaitan

Lihat lagi