CSS3简单动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 开发工具与关键技术:DW   transform
 作者: 李杨
 撰写时间:2019-01-18 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Css3是css层叠样式表技术的升级版本。
Css3对于css来说就是多了很多的新属性。然后css3很多需要用图片和脚本来实现的效果,现在只需要短短的几行代码就能搞定了。比如变形处理(旋转,缩放,倾斜,移动),动画,图片边框,盒子阴影等。还有选择器这些。

transform的原理比较特殊。从字面上就可以看出来是变形的意思,他的值主要包括 旋转rotate,扭曲skew,缩放scale,移动translate以及矩阵变形matrix 。
CSS3用四个函数可以实现简单的变形用下面的图举个例子原本的位置:
在这里插入图片描述
1, translate位移函数:transform:translate(水平方向px,垂直方向px)基本含义就是将一个元素的显示位置平移tx和ty。如图平移后的效果。
在这里插入图片描述 在这里插入图片描述
2,scale缩放函数:transform:scale(水平方向放大的倍数,垂直方向放大的倍数)将一个元素按指定的倍数进行缩放。缩放两倍后
在这里插入图片描述
在这里插入图片描述
3,rotate旋转函数:transform:rotate(值deg)将一个元素按指定的角度旋转
在这里插入图片描述在这里插入图片描述

4, skew倾斜函数:transform:skew(ax,ay)将一个元素按指定的角度在x轴和y轴上倾斜。倾斜30deg后的效果
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44540183/article/details/86545865