web前端开发——进阶css（平面转换）

目录

一.平面转换

1.位移：使用translate实现元素位移效果

2.旋转：平面旋转实现元素旋转效果（角度单位是：deg）

3.缩放：使用scale改变元素的尺寸 

---

一.平面转换

平面转换概念：使用transform属性实现元素的位移、旋转、缩放等效果。

1.位移：使用translate实现元素位移效果

1. 语法：transform: translate(水平移动距离,垂直移动距离)；
2. 取值(正负均可)：像素单位数值；百分比(参照物为盒子自身尺寸)
3. 注意: X轴正向为右, Y轴正向为下
4. 技巧：translate()如果只给出一个值, 表示x轴方向移动距离；单独设置某个方向的移动距离: translateX() & translateY()

 实现代码：

        1.位移—水平/垂直移动

        2.位移—绝对居中

         3.双开门案例

2.旋转：平面旋转实现元素旋转效果（角度单位是：deg）

        1.平面旋转：transform:rotate( )

        实现代码：

        效果图：

QQ录屏20230411165728

2.旋转原点：使用transform-origin属性改变转换原点

1. 语法：默认圆点是盒子中心点；transform-origin: 原点水平位置原点垂直位置;
2. 取值：方位名词(left. top. right. bottom. center)；像素单位数值；百分比(参照盒子自身尺寸计算)

     3.实现代码：

        效果图：

3.多重转换 ：使用transform复合属性实现多形态转换

        1.语法： transform：translate（）rotate（）；

        2.实现代码：

        效果图（旋转滚动）：

QQ录屏20230411184638

3.缩放：使用scale改变元素的尺寸 

1. 语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
2. 技巧：一 般情况下,只为scale设置-一个值, 表示x轴和y轴等比例缩放；transform: scale(缩放倍数)；scale值大于1表示放大, scale值小于1表示缩小
3. 实现代码:

         效果图：

缩放

	
	
	
		
		
	
	
		

			

				

					

						
						
					
					
我是海绵宝宝，我是派大星，你们好呀！
				
			
			
		
	

        效果图：

haimianbaobao