H5元素形变

H5元素形变

一、缩放

语法：

​ transform:scale(缩放倍率) //整体缩放

​ transform:scale(水平缩放倍率，垂直缩放倍率) //单独设置水平和垂直方向的缩放

​ transform: scaleX(缩放倍率) //沿X轴缩放

​ transform: scaleY(缩放倍率) //沿Y轴缩放

​ transform: scaleZ(缩放倍率) //沿Z轴缩放

​ transform: scaleX(缩放倍率) scaleY(缩放倍率) scaleZ(缩放倍率) //单独设置XYZ轴的缩放

二、倾斜

​ 语法：

​ transform: skew(水平倾斜角度deg) //水平方向倾斜

​ transform: skew(水平倾斜角度deg，垂直倾斜角度deg) //单独设置水平和垂直方向倾斜

​ transform: skewX(倾斜角度deg) //沿X轴倾斜

​ transform: skewY(倾斜角度deg) //沿Y轴倾斜

​ transform: skewZ(倾斜角度deg) //沿Z轴倾斜

​ transform: skewX(倾斜角度deg) skewY(倾斜角度deg) skewZ(倾斜角度deg) //单独设置XYZ轴的倾斜

三、移动

语法

​ transform: translate(水平方向移动距离px); //水平方向移动

​ transform: translate(水平方向移动距离px 垂直方向移动距离px); //垂直方向移动

​ transform: translateX(移动距离px); //沿X轴移动

​ transform: translateY(移动距离px); //沿Y轴移动

​ transform: translateZ(移动距离px); //沿Z轴移动

​ transform: translateX(移动距离px) translateY(移动距离px）translateZ(移动距离px); //单独设置XYZ轴移动

四、旋转

语法：

​ transform: rotateX(角度deg) //沿X轴旋转

​ transform: rotateY(角度deg) //沿Y轴旋转

​ transform: rotateZ(角度deg) //沿Z轴旋转

​ transform: rotateX(角度deg) rotateY(角度deg) rotateZ(角度deg) //上面三种方法的连写

​ transform: rotate3d(x轴权重，Y轴权重，Z轴轻重，总角度) //沿XYZ轴旋转,前三个参数为角度分配比例，最后一个参数为总的旋转度数

示例：

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				
			}
			div{
				margin: 10px;
				width: 250px;
				height: 360px;
				background-color: yellow;
				position: relative;
				border: 1px solid black;
			}
			img{
				width: 200px;
				position: absolute;
				left:25px;
				top:25px
			}
			p{
				position: absolute;
				width: 250px;				
				bottom: 0px;
				font-size: 15px;
				text-align: center;
			}
			.A1{
				opacity: 0.4;
			}
			/* 放大0.8倍 */
			#scale1{
				transform: scale(0.8);
			}
			/* 水平方向放大1.1倍，垂直方向放大0.5 */
			#scale2{
				transform: scale(1.1,0.5);
			}
			/* 沿X轴放大0.8倍 */
			#scale3{
					transform: scaleX(0.8);
			}
			/* 沿Y轴放大0.8倍 */
			#scale4{
					transform: scaleY(0.8);
			}
			/* 沿Z轴放大0.8倍 */
			#scale5{
					transform: scaleZ(0.8);
			}
			/* 沿XYZ轴放大0.8倍*/
			#scale6{
								transform: scaleX(0.8) scaleY(0.8) scaleZ(0.8);
						}
			 /* 水平方向倾斜15度 */			
			#skew1{
								transform: skew(15deg);
						}
			/* 垂直方向倾斜15度 */
			#skew2{
								transform: skew(0,15deg);
						}
			/* 水平和垂直方向倾斜15度 */
			#skew3{
								transform: skew(15deg,15deg);
						}
			/* 沿X轴倾斜15度 */
			#skew4{
								transform: skewX(15deg);
						}
			/* 沿Y轴倾斜15度 */			
			#skew5{
								transform: skewY(15deg);
						}
			/* 沿XY轴倾斜15度 */
			#skew6{
								transform: skewX(15deg) skewY(15deg);
						}
			/* 水平方向移动15px */
			#translate1{
								transform: translate(15px);
						}
			/* 垂直方向移动15px */
			#translate2{
								transform: translate(15px,15px);
						}
			/* 沿X轴移动15px */
			#translate3{
								transform: translateX(15px);
						}
			/* 沿Y轴移动15px */
			#translate4{
								transform: translateY(15px);
						}
			/* 沿Z轴移动15px */
			#translate5{
								transform: translateZ(15px);
						}
			/* 沿XYZ轴移动15px */
			#translate6{
								transform: translateX(15px) translateY(15px) translateZ(15px);
						}
			/*沿X轴旋转45度*/
			#rotate1{
								transform: rotateX(45deg);
			}
			/*沿X轴旋转45度*/
			#rotate2{
								transform: rotateY(45deg);
			}
			/*沿Z轴旋转45度*/
			#rotate3{
								transform: rotateZ(45deg);
			}
			
			/*沿XYZ轴旋转45度*/
			#rotate4{
								transform:  rotateX(45deg)  rotateY(45deg) rotateZ(45deg);
			}
			/*沿XYZ轴旋转15度,前三个参数为角度分配比例，最后一个参数为总的旋转度数*/
			#rotate5{
								transform:  rotate3d(1,1,1,45deg);  
			}
			
			
			
		</style>

效果: