欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css变形transform属性详细介绍

程序员文章站 2022-04-20 08:34:18
...

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('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 = 'translate(0,'+ count +'px)'
        addEnd(this,function(){
            count += 20;
            oHome.style.transform = 'translate(0,'+ count +'px)'
        })
    }
    function addEnd(obj,fn) {
        obj.addEventListener('WebkitTransitionEnd',fn,false);
        obj.addEventListener('transitionend',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)来改变

以上就是css变形transform属性详细介绍的详细内容,更多请关注其它相关文章!

相关标签: css transform