CSS3——transform属性

一、前言

transform属性是CSS3中新增的一种非常强大的属性，它允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间实现的。
接下来就让我们一起学习transform属性

二、transfrom:translate;

位移,可以改变元素的位置,

translateX

让元素沿X轴方向进行位移

代码

	.box {
	    width: 500px;
	    height :300px;
	    background-color: #ccc;
	    margin: 100px auto;
  	}
  	.content {
	  	width:200px;
	  	height:200px;
	  	background-color:#f90;
	  	transform: translateX(200px);
	}
  <div class="box">
    <div class="content"></div>
  </div>

效果图一

效果图二

查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,橙色盒子向右移动了200px的距离

translateY

让元素沿Y轴进行位移

代码

.box {
    width: 500px;
    height :300px;
    background-color: #ccc;
    margin: 100px auto;
  }
  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: translateY(200px);
	}

<div class="box">
    <div class="content"></div>
  </div>

效果图一

效果图二

查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,橙色盒子向下移动了200px的距离

translate

一个值是,代表的是水平方向移动(沿X轴),两个值时,第一个值代表水平方向移动,第二个值代表垂直方向移动(沿Y轴)

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: translate(200px,200px);
	}

效果图一

效果图二

查看两张效果图进行对比,可以看到,效果图一,从开发者工具中取消了transform属性,橙色盒子在大盒子的左上角显示,而效果图二中可以看到,从开发者工具中选中了transform属性,可以看到橙色盒子向右移动200xp,又向下移动200px
关于translate,可以设置负值,设置为负值时,沿X轴向左移动,沿Y轴向上移动,也可以设置%(百分比)

三、transform:scale;

让元素放大或者缩小

scaleX;

定义元素沿X轴缩放,取值为1,大于1放大,小于1缩小

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scaleX(1.3);
	}

效果图一

效果图二

对比两张效果图可以看到,效果图一,我们从开发者工具中取消transform属性,可以看到,盒子的大小并没有发生变化,在效果图二中,我们选中了transform属性,可以从效果图二中看到,盒子的宽从200px变成了260px,并且橙色盒子左侧超出灰色背景一部分

scaleY;

定义元素沿Y轴缩放,取值为1,大于1放大,小于1缩小

代码

.content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scaleY(1.3);
	}

效果图一

效果图二

对比两张效果图可以看到,效果图一,我们从开发者工具中取消transform属性,可以看到,盒子的大小并没有发生变化,在效果图二中,我们选中了transform属性,可以从效果图二中看到,盒子的高度从200px变成了260px,并且橙色盒子顶部超出灰色背景一部分

scale

同时设置水平,垂直方向的缩放比例,一个值代表同时缩放水平和垂直缩放,两个值时,第一个值代表水平缩放,第二个值代表的是垂直缩放

代码(一个值)

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3);
	}

效果图

观察代码,可以看到我们给盒子设置的宽高是200px,但是从效果图中可以看到盒子的宽高是260px,这是通过了scale属性,让盒子的宽高同时缩放了1.3倍

代码(两个值)

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3,1.5);
	}

效果图

观察代码,可以看到我们给盒子设置的宽高是200px,但是从效果图中可以看到盒子的宽是260px,高变成了300px,从代码中可以看到给scale设置了两个值,第一个值代表水平缩放1.3倍,第二个值代表垂直缩放1.5倍

可以设为负值

scale属性是可以设置为负值的(不建议使用)

代码

  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(-1);
	}

效果图一

效果图二

观察代码,可以看到scale的值被设置成负一,对比两张效果图,可以看到,效果图二选中transform属性后,橙色盒子内的内容在盒子的右下,并且文字是倒着的

不能对行内元素进行缩放

scale标签是不支持对行内元素进行缩放的(行内元素:不可以设置宽高,可以共处一行"span标签")

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: scale(1.3);
	}
<div class="box">
    <span class="content">最编程!!!</span>
  </div>
  

效果图

查看带单,可以看到已经将div标签换成了span标签,观察效果图可以看到,从开发者工具中选中了transform属性,并且水平,水质方向缩放1.3倍,但是我们的内容并没有改变大小

四、transform:rotate;

2D旋转,让元素在二位平面内顺时针或者逆时针旋转

rotateX

让一个元素围绕横坐标 (水平轴,X轴) 旋转，而不会对其进行变形。

代码

 .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotateX(45deg);
	}
.  <div class="box">
    <div class="content">最编程!!!</div>
  </div>
 

效果图一

效果图二

对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子和文本高度减小,这是因为让橙色盒子沿x轴顺时针旋转45deg,显示给我们的样式发生变化,因为是二维空间,显示的不明显

ritateY

让一个元素围绕横坐标 (垂直轴,Y轴) 旋转，而不会对其进行变形。

代码

  .content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotateY(45deg);
	}

效果图一

效果图二

对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子和文本宽度减小,这是因为让橙色盒子沿Y轴顺时针旋转45deg,显示给我们的样式发生变化,因为是二维空间,显示的不明显

rotateZ

可以让一个元素围绕横 Z 轴旋转，而不会对其进行变形

代码

 .content {
 	width:200px;
 	height:200px;
 	background-color:#f90;
 	transform: rotateZ(45deg);
   }

效果图一

效果图二

对比两张效果图,效果图一,在开发者工具中取消transform属性,盒子宽高200px,显示白灰色背景左上角,效果图二在开发者工具中选中了transform属性,可以看到,橙色盒子的变化非常明显,顺时针旋转45度

totate

绕z轴旋转

代码

.content {
 	width:200px;
 	height:200px;
 	background-color:#f90;
 	transform: rotate(135deg);
   }

效果图

观察效果图,查看到橙色盒子旋转135度,与绕z轴旋转的效果图旋转方向一致

可以设置为负值

rotate属性可以设置为负值,设置负值为逆时针方向旋转,

代码

.content {
  	width:200px;
  	height:200px;
  	background-color:#f90;
  	transform: rotatez(-45deg);
	}

效果图

查看代码,让橙色盒子沿Z轴旋转-45deg,与上一张效果图对比,发现橙色盒子中的文本与上一张效果图旋转方向相反

五、transform：skew；

让一个元素在二维平面中倾斜转换

skewX

沿X轴（水平方向倾斜）

代码

 .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: skewX(30deg);
	}

效果图一

效果图二

查看代码,设置盒子宽150px,高200px,背景色橙色
对比两张效果图,可以看到,效果图二比效果图一又一个向左倾斜,设置为负值的话则会向右倾斜

skewY

沿Y轴（垂直方向倾斜）

代码

  .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: skewY(30deg);
	}

效果图一

效果图二

对比两张效果图,观察文本,可以看到文本向上倾斜,如果设置为负值文本则会向下倾斜

skew

一个值代表skewX,两个值时.第一个值代表的是skewX,第二个值代表的是skewY
(这里直接放置效果图,样式代码在效果图中开发者工具内,有截取)

效果图一

可以看到一个值时,橙色盒子向左倾斜30deg

效果图二

可以看到两个值时,橙色盒子向左倾斜30deg,向上倾斜25deg.

多重变换

可以用同一个transform书写多个属性值

代码

 .content {
  	width:150px;
  	height:100px;
  	background-color:#f90;
  	transform: translate(200px) rotate(60deg);
	}

效果图一

从效果图中可以看到,橙色盒子即发生了位移又放生了旋转,查看代码,在一个transform属性中,先写了位移的属性值,让橙色盒子向右移动200px 又让橙色盒子沿Z轴旋转60deg

六、transform-origin

更变元素变形的原点
例如:rotate属性的变形原点(旋转原点)是盒子的中心点,使用transform-origin属性后,可以更改盒子中心点

代码

 .content {
  	width:100px;
  	height:100px;
  	background-color:#f90;
  	transform: rotate(60deg);
    transform-origin: right bottom;
	}

效果图

查看代码,可以看到我们使用了 transform-origin: right bottom;更改了盒子的旋转原点
查看效果图可以看到橙色盒子按照盒子的右下角旋转60deg

transform-origin取值

• 一个值:必须是left,top,center,right,bottom 中的一个
• 两个值,第一给值如果是left center right中的一个,另一个值必须是top,center,right中的一个
• 三个值,前两个值和只有两个值时的用法相同。第三个值必须是(css属性会用到的长度,例如width)。它始终代表 Z 轴偏移量。

除了关键改变原点之外,还可以取值像素(px),百分比(%),这里就不过多描述,如果小伙伴该兴趣可以自己尝试,

七、总结

CSS3中的transform属性是一个功能强大的工具，它允许开发者对元素进行各种形状和位置的改变。通过合理使用该属性及其转换函数，可以创建出令人惊叹的视觉效果和用户体验。