HTML（二）transform属性

最新推荐文章于 2025-05-27 16:38:22 发布

喝啤酒的猫

最新推荐文章于 2025-05-27 16:38:22 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_38763173/article/details/104197644

html+css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML的transform属性，包括translate、scale、rotate和skew的用法及组合效果。重点讨论了translate与其他属性组合时的特殊问题，如scale与translate、rotate与translate、skew与translate的组合行为，并解释了transform-origin、transform-style、backface-visibility和perspective等其他属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transform 有四个属性：

位移：translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)
% ——相对于自身宽高的百分比
px
缩放：scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz)
旋转：rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)
deg
斜切：skew(x-angle,y-angle)、skewX(angle)、skewY(angle)
deg

如果 translate 、skew 只有一个参数，就代表 translateX 、skewX；
如果scale 只有一个参数，代表 scale (x , y)

一、translate属性与其他属性组合导致的特殊问题

scale与translate组合

transform: scale(2) translate(100px);
transform: translate(100px) scale(2);

transform 组合属性，是按照从左到右的顺序依次实现功能；
scale在前 translate在后 ,图形会先以transform-origin 为中心扩大/缩小，之后再进行位移，translate位移的距离也会扩大或缩小scale相应的倍数；
translate在前 scale在后，图形会先位移，之后再以transform-origin 为中心扩大/缩小

<div class = "box1">box1</div>
<div class = "box2">box2</div>
<div class = "box3">box3</div>
<div class = "box4">box4</div>

<style>
	*{
		margin:0;
		padding:0;
	}
	.box1{
		width:100px;
		height:100px;
		background: pink;
	}
	.box2{
		width:100px;
		height:100px;
		background: skyblue;                  
		transform:  translate(100px) ;
	} 
	.box3{
		width:100px;
		height:100px;
		background: plum;
		transform:  translate(100px) scale(2) ;
		opacity: .5;
		/* transform-origin: left top; */
	}
	.box4{
		width:100px;
		height:100px;
		background: burlywood;
		transform:scale(2) translate(100px);
		opacity: .5;
	} 
</style>

运行结果如下：
在这里插入图片描述

rotate与translate组合

1、当translate 在前，rotate 在后时：
transform : translate(20px) rotate(20deg) ;
当translate 变动时，图形会沿X轴移动；
当translate变动时，还没有rotate旋转，所以此时X轴是水平的，图形就沿水平移动
在这里插入图片描述
1、当rotate 在前，translate 在后时：
transform : rotate(20deg) translate(20px) ;