CSS3新特性————Transform

最新推荐文章于 2024-07-26 09:56:47 发布

IfIloseyou

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量469

点赞数

本文链接：https://blog.csdn.net/IfIloseyou/article/details/105754522

版权

CSS3的transform属性用于元素的变形，包括旋转、偏移、缩放和倾斜。它不会引起布局的回流，主要包含translate、rotate、scale和skew等方法。translate用于平移，rotate用于旋转，scale调整缩放比例，skew则实现翻转效果。这些变换都在元素的布局计算后应用，不影响布局本身。

摘要由CSDN通过智能技术生成

CSS中transform 属性

作用是变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。

需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。

一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是说，浏览器在实地渲染和显示一个网页之前，都会先进行布局计算，得到网页中所有元素对应的坐标位置，一旦元素的坐标位置或尺寸信息发生改变，浏览器就会重新进行布局计算，这个重新计算的过程叫做回流（reflow），一般情况下，transform不会引发回流。

主要包括以下几种：移动 translate，缩放scale，旋转rotate，翻转skew，改变旋转轴心

translate() 平移
使用transform实现元素的移动
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/transform: translate(100px);transform: translate(400px,500px);transform: translate(0px,500px);添加水平或者垂直方向的移动transform:translateX(300px);transform:translateY(300px);

		*{
   
		margin: 0;
		padding: 0;
		}
		div{
   
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.div-translate{
   
			transform: translate(50px,10px);
			-webkit-transform:translate(50px,10px);
			/*Safari和Chrome*/
			-ms-transform: translate(50px,10