CSS3的动画与变形

最新推荐文章于 2022-03-02 15:14:36 发布

敲可耐的我

最新推荐文章于 2022-03-02 15:14:36 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/weixin_44542781/article/details/89072818

版权

本文介绍了CSS3中用于创建动画和变形的三个关键属性：transform（包括rotate、scale和skew）。rotate通过指定角度实现元素的旋转；scale允许元素在水平或垂直方向缩放；skew则使元素沿着X轴或Y轴倾斜。通过实例代码展示了这些功能的效果。

摘要由CSDN通过智能技术生成

CSS3的动画与变形

我们所学的CSS3主要提供了三大属性：transform、transition、animation，这三大属性可以来实现我们的变形与动画效果；其中transform它是可以对HTML元素进行常见的几何变换，它是对CSS3提供了一个变形的属性支持，这个属性支持一个或多个变形函数。常见的几何变换中有旋转、缩放和扭曲，还可以使用矩阵。

接下来我给大家讲解和演示旋转、缩放和扭曲这三种几何变形。

1、变形—旋转 CSS3提供的变形函数：rotate()

Rotate()旋转：它是通过设计者想要设定的角度参数来对元素相对原点进行旋转它的操作是在二维空间里面进行的，设置自己想要旋转的角度值，用来设置旋转的幅度。若你设置的角度值是正直，元素相对原点中心为顺时针旋转，反之，用来设置旋转的角度值是负值，为逆时针。

操作代码：
我们先设置一个div盒子，给它设置高宽度，还有背景颜色
< div class=“div1”>爱滴魔力转圈圈(^▽)</ div >

	.div1{                                 
		width:200px;                          
		height: 200px;                        
		background: pink;                       
		margin: 300px auto;                       
		height: 300px;
		cursor: pointer;                        
		transform: rotate(360deg);
		transform-origin:top;/*原