css3动画效果的变换个人总结

最新推荐文章于 2019-12-03 19:08:04 发布

原创最新推荐文章于 2019-12-03 19:08:04 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

本文详细介绍了CSS3中transform属性的使用方法，包括translate、rotate、scale和skew等常见变换方式，并通过示例展示了如何设置动画关键帧来实现元素的位置移动、旋转、缩放及倾斜效果。

css3动画变换 transform:
兼容性问题
1. webkit 谷歌浏览器
2. moz    火狐浏览器
3. ms microsoft 微软W3c标准
4. o Opera IE9
属性:
1. matrix 矩阵（6个参数：a,b,c,d,tx,ty）
2. translate 2D平移(x,y)

         #div1{
            width: 300px;
            height: 300px;
            background: blue;
            -webkit-animation:change linear 1s;
        }
        @-webkit-keyframes change{
            from{transform:translate(0,0)}
            to{transform:translate(0,200px)}
        }
3. rotate 2D选转（x deg度）

        @-webkit-keyframes change{
            from{transform:rotate(0deg)}
            to{transform:rotate(90deg)}
        }
4. scale 缩放（1，1）0-1表示当前缩放倍数

         @-webkit-keyframes change{
            from{transform:scale(0,0)}
            to{transform:scale(1,1)}
        }
5. skew 斜切扭曲（水平方向扭曲，垂直方向的扭曲）

         @-webkit-keyframes change{
            from{transform:skew(0)}
            to{transform:skew(180deg,0deg)}
        }

6. transform-origin 变换对象的原点（x y）百分比，像素，left..
注意一点这里括号里面参数不是都好而是空格