CSS3的动画与变形

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;/*原点*/
		transition-duration:2s;/*动画时长*/
		transition-delay:1s;/*延迟*/ }   

/旋转/

.div1:hover{
	width:300px;
	height: 300px;
 }

效果图：

1、 变形—缩放 CSS3提供的变形函数：scale ()
Scale()：这个函数可以让元素根据中心原点对对象进行缩放，它缩放情况有三种，
1)、scaleX(x)根据(X轴缩放)元素水平方向进行缩放
2)、scaleY(y)根据(Y轴缩放)元素垂直方向进行缩放
3)、scale(X,Y)水平与垂直方向同时缩放/X轴与Y轴同时缩放，是上两种结合。（Y是一个可选参数，若没有给它设置Y的值，就表示X轴和Y轴它们两个的缩放是一样的）

操作代码：
我们先设置一个div盒子，给它设置高宽度，还有背景颜色
< div class=“div1”>我长大了两倍(〃‘▽’〃)</ div >

.div1{                           
	width:200px;                         
	 height: 200px;                             
	 background: pink;                          
	margin: 300px auto;
	cursor: pointer;
	transform-origin:top;/*原点*/
	 transition-duration:2s;/*动画时长*/
	transition-delay: 0.5s;/*延迟*/  }   

/缩放/

	 .div1:hover{
		transform:scale(2);
	}

效果图：

1、 变形—扭曲 CSS3提供的变形函数：skew()

shew()：这个函数可以使元素倾斜显示，它能够改变元素的形状，但它与rotate()不一样，skew()不会旋转，只会改变元素形状，它是将一个对象以中心位置来围绕X轴和Y轴一定的角度倾斜；它和缩放一样有三种使用方法：

1. skewX(x)仅使元素在（X轴扭曲变形）水平方向扭曲进行变形；
2. skewY(y)仅使元素在（Y轴扭曲变形）垂直方向扭曲进行变形；
3. skew(x,y)使元素在水平和垂直方向同时扭曲

skew（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向就不会倾斜，只有X轴会倾斜。
操作代码：

.div1{                           
	width:200px;                         
	height: 200px;                             
  		background: pink;                          
	margin: 300px auto;
	cursor: pointer;
	transform-origin:top;/*原点*/
	 transition-duration:2s;/*动画时长*/
	transition-delay: 0.5s;/*延迟*/  }   

/扭曲/

 .div1:hover{ 
	transform: skew(20deg,20deg);
}

效果图：

以上就是全部内容