变形、过渡与动画

最新推荐文章于 2021-12-10 09:52:22 发布

Han_Zhou_Z

最新推荐文章于 2021-12-10 09:52:22 发布

阅读量178

点赞数

文章标签：动画 css3 css

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121003800

版权

1、transition-property属性

2、transition-duration属性

3、transition-timing-function属性

一、变形效果

1、CSS3中实现变形的优点

（1）不需要加载额外的文件(例如flash文件)

（2）提供开发效率

（3）提高页面的执行速度

2、变形的使用方法

（1）transform:none 不变形

（2）transform：transform-function 指定变形函数

3、变形函数

（1）matrix(<number>,<number>,<number>,<number>,<number>,<number>)：

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

（2）translate(<length>[, <length>])：指定对象的2D translation(2D平移)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

（3）translateX(<length>)：指定对象X轴（水平方向）的平移

（4）translateY(<length>)：指定对象Y轴（垂直方向）的平移

（5）scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

若是负数，则先反转对象,然后进行缩放

（6）skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数表示相对于X轴进行倾斜，正数则是逆时针倾斜，第二个参数表示相对于Y轴进行倾斜，正数则是顺时针倾斜，如果省略了第二个参数，则取默认值0。单位是deg，表示角度

<style>
    .d1{
        width: 100px;
        height: 100px;
        background-color: green;
        transform: skew(5deg,5deg);
    }
</style>
<body>
    <div class="d1"></div>
</body>
</html>

（7）rotate(angle)：旋转，参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。

<style>
    #pic{
        width: 200px;
        height: 200px;
        transform: rotate(45deg);
    }
</style>
<body>
    <img id="pic" src="../images/4.jpg" alt="">
</body>

（8）rotateX() 函数用于指定元素围绕X轴旋转，参数如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

（9）rotateY() 函数用于指定元素围绕Y轴旋转，参数如果值为正，元素将围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。

4、中心点

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。

transform-origin: x-axis y-axis z-axis;

<sty

最低0.47元/天解锁文章

Han_Zhou_Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
变形、过渡与动画

目录一、变形效果1、CSS3中实现变形的优点2、变形的使用方法3、变形函数4、中心点二、过渡效果(transition)1、transition-property属性2、transition-duration属性3、transition-timing-function属性4、transition-delay属性5、transition属性重点：变形和过渡的区别三、动画效果1、创建动画2、动画的属性一、变形效果1、CSS3中实现变形的优点.
复制链接

扫一扫