Rumah >hujung hadapan web >tutorial css >css变形transform属性详细介绍

css变形transform属性详细介绍

高洛峰asal: 2017-03-20 16:28:321890semak 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事件。比如下面重复改变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>

css变形transform属性详细介绍

transform：变形

旋转：rotate()：度数
斜切：skew()：度数

skewX
skewY

缩放：scale()：正数、负数、小数

scaleX
scaleY

位移：translate()：css支持的单位都可以

translateX
translateY

transform的执行顺序：后写的先执行

transform: scale(2) rotate(50deg);　先执行旋转，在执行缩放

以上transform的值，也会根据中心点（transform-origin）来改变

Atas ialah kandungan terperinci css变形transform属性详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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：CSS布局flex实现div交叉排布与底部对齐方法Artikel seterusnya：css父标签中的子标签默认位置详细介绍

Artikel berkaitan

Lihat lagi