css基础篇-2D变换

所有div样式

	div{
    
    
		width: 200px;
		height: 200px;
		background-color: red;
	}

1、 旋转

	// css
	.rotate{
    
    
		transform:rotate(90deg);
	}
	// html
	<div class="rotate">旋转</div>

---

2、缩放

.scale{
    
    
	/*可以给一个或两个值*/
	transform:scale( 1,1);
}

---

3、倾斜

.skew{
    
    
	transform:skewX(45deg); // skewX  skewY
}

---

4、位移

.translate{
    
    
	/*位移  一个值水平，两个值水平  竖直。*/
	transform: translate(10px,10px);
}