css3动画-transform属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

transform属性---2D位置移动

1.translate(x,y)

定义：

            基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y

语法：

                   transform：translate(x,y);                                                                                                         

2.translateX(x)

定义：

             基于原来的位置，沿X轴平移，长度为x

语法：

                   transform：translateX(x);                                                                                                         

3.translateY(y)

定义：

             基于原来的位置,沿Y轴平移，长度为y

语法：

                   transform：translateY(y);                                                                                                         

transform属性---3D位置移动

1.translate3d(x,y,z)

定义：

             基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z

语法：

                   transform：translate3d(x,y,z);                                                                                                       

2.translateZ(z)

定义：

             基于原来的位置,沿Z轴平移，长度为z

语法：

                   transform：translateZ(z);                                                                                                         

transform属性---2D缩放转换

1.scale(x,y)

定义：

         基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数

语法：

         transform：scale(x,y);                                                                                                             

2.scaleX(x)

定义：

          基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数

语法：

         transform：scale(x);                                                                                                            

3.scaleY(y)

定义：

          基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数

语法：

         transform：scale(y);                                                                                                             

transform属性---3D缩放转换

1.scale3d(x,y,z)

定义：

          基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数

语法：

         transform：scale3d(x,y,z);                                                                                                             

2.scaleZ(z)

定义：

          基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数

语法：

         transform：scaleZ(z);                                                                                                             

transform属性---2D旋转

1.rotate(angle)

定义：

          以图形的几何中心点为旋转中心，顺时针旋转角度为angle

语法：

         transform：rotate(angle);                                                                                                            

2.rotateX(x)

定义：

          绕X轴方向旋转，顺时针旋转角度为angle

语法：

         transform：rotateX(x);                                                                                                            

3.rotateZ(z)

定义：

          绕Y轴方向旋转，顺时针旋转角度为angle

语法：

         transform：rotateZ(z);                                                                                                             

transform属性---3D旋转

1.rotate3d(x,y,z,angle)

定义：

          同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle

语法：

         transform：rotate3d(x,y,z,angle);                                                                                                             

2.rotateZ(z)

定义：

          绕Z轴方向旋转，顺时针旋转角度为angle

语法：

         transform：rotateZ(z);                                                                                                             

实例演示1

html文件

	
		
		
		
	
	
		

			
			
像少年啦飞驰
		
	

css文件

*{
	margin: 0;
	padding: 0;
}
#pic{
	width: 212px;
	height: 300px;
	margin: 100px auto;
	border: 2px solid gainsboro;
	box-shadow: 0 0 8px darkgray;
	position: relative;
}
#pic p{
	width: 212px;
	height: 300px;
	background: whitesmoke;
	text-align: center;
	line-height: 300px;
	font-family: "微软雅黑";
	opacity: 0;
    /*
     * 定义初始状态的transform属性
     * transition定义变换属性和周期，此处为所有属性，周期2s
     */
	transform: translateY(-303px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5,0.5);
	transition: all 2s;
}
#pic:hover p{
	opacity: 1;
	/*
	 * 定义变换后的状态
	 */
	transform: translateY(-303px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1,1);
}

实例演示2

html文件

	
		
		
		
	
	
		

			
			
我的世界就如一座城池
		
	

css文件

*{
	margin: 0;
	padding: 0;
}
#pic{
	width: 212px;
	height: 300px;
	border: 5px solid whitesmoke;
	box-shadow: 0 0 0 8px pink;
	margin: 100px auto;
	overflow:hidden;
	position: relative;
	
}
#pic:hover img{
	transform: scale(1.5,1.5);
	transition: all 2s;
}
#pic p{
	width: 212px;
	height: 20px;
	background: black;
	opacity: 0.5;
	position: absolute;
	bottom: -20px;
	color: white;
	font-family: "微软雅黑";
	font-size: 13px;
	text-align: center;

}
#pic:hover p{
	bottom: 0px;
	transition: bottom 1s;
}