提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS transform（变形）和 transition（过渡）

2023-04-18 14:30:12 时间

发表于2017-07-312019-01-01 作者 wind

啥也不说了，直接上代码：

transform用来设置变换、transition用来设置过渡，之前一直记得比较模糊，今天分清了，以前看的时候可能是混起来看的，今天是分开看，所以觉得很好理解。贝塞尔曲线表示时间和进度的关系，可以通过贝塞尔工具 预览效果。

变形是静态的是对元素外观的修改，过渡是动态效果，是当元素（指定或任意）样式发生变化是产生的过渡效果。

#a{
            width:100px;
            height:100px;
            /*background:#f00;*/
            transform: rotate(40deg) /*旋转，正数顺时针，负数逆时针*/ translate(-10px,-30px)/*位移*/ scale(2,1) /*缩放*/ skew(30deg,-50deg)/*翻转*/;
            /*transform:*/
            transform-style:preserve-3d ;
            transform-origin:10% 20% /*转换原点，如果是3d的三个值*/;
            transition:all 2s  ease 1s  /*过渡效果，property duration timing-function delay*/;
            transition-timing-function:ease;  /*单独设置过渡时间效果*/
            transition-timing-function: cubic-bezier(0,1,0,1);
        }

相关文章