变换元素transform的那些事儿

淡淡的烟草味﹌ 2022-06-12 03:08 255阅读 0赞

老习惯，直接上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	div{
    		width: 200px;
    		height: 200px;
    		border:1px solid red;
    		margin:50px;
    		float: left;
    		text-align: center;
    		line-height: 200px;
    		font-size: 24px;
    	}
    	/*translateX就是在原来的基础上,想右移动30像素,如果是负数就是向左移动30像素*/
    	.div1{
    		transform: translateX(30px);
    	}
    	/*translateY就是在原来的基础上,想下移动30像素,如果是负数就是向上移动30像素*/
    	.div2{
    		transform: translateY(30px);
    	}
    	/*直接使用translate,里面传入两个值,什么含义就不言而喻了,第一个是关于x轴的移动，第二个是关于y轴的移动*/
    	.div3{
    		transform: translate(20px,20px);
    	}
    	/*总结，其实以上从表面上看就是和将该元素设置为相对定位,然后设置left,top值一样*/
    	/*我们为什么还要使用这个呢?当然第一是更加方便,第二是为了使用transition实现过渡效果*/
    
    
    	/*将宽度扩大为原来的1.5倍,同理如果是scaleY也就是高度放大,下面只是介绍X方向的操作,Y轴同理*/
    	.div4{
    		transform: scaleX(1.5);
    	}
    	/*如果我们的值不是大于1,是在0-1之间的话,那么就是缩小*/
    	.div5{
    		transform: scaleX(0.5);
    	}
    	/*如果值是小于0的话，那么就是进行旋转180度，并且长度或者宽度变为其绝对值*/
    	.div6{
    		transform: scaleX(-1);
    	}
    	
    
    	/*围绕中心旋转,如果是正值则是顺时针,如果是负值,则是逆时针*/
    	.div7{
    		transform: rotate(30deg);
    	}
    
    	/*和上面的一样,第一个代表X方向,第二个代表Y方向。此处为元素倾斜，第一个参数是水平元素倾斜，也就可以理解为，如果值为正值，可以理解为我们拖动左上角的那个点，将一个长方形变成一个平行四边形,为负值，就是拖动右上角的点*/
    	.div8{
    		transform: skew(10deg,0deg);
    	}
    	.div9{
    		/*设置变换的起点,默认情况是50%，50%。刚好是正中心*/
    		transform-origin: 10% 10%;
    		transform: rotate(-45deg);
    	}
    	</style>
    </head>
    <body>
    	<div class="div1">1</div>
    	<div class="div2">2</div>
    	<div class="div3">3</div>
    	<div class="div4">4</div>
    	<div class="div5">5</div>
    	<div class="div6">6</div>
    	<div class="div7">7</div>
    	<div class="div8">8</div>
    	<div class="div9">9</div>
    	<div class="div10">10</div>
    </body>
    </html>