标签： transform

HTML

<div class="wrapper">
	<div></div>
</div>

CSS

.wrapper {
	width: 500px;
	height: 100px;
	border: 1px solid #000;
	margin: 20px auto 0;
}
.wrapper div {
	width: 100px;
	height: 100px;
	transform: translateX(400px);
	background: lightblue;
	transition: all 0.5s;
}
.wrapper div:hover {
	transform: translateX(0px);
}

如图，元素通过translate位移改变位置后，仍占据原空间，transform: translateX(0px)可以使其回到原位.

HTML代码：

<div class="wrapper">
	<div></div>
	<div class="div1">div1</div>
	<div class="div2">div2</div>
	<div class="div3">div3</div>
</div>

translate和scale

CSS代码：

div {
	width: 100px;
	height: 100px;
	background: tomato;
}
.wrapper {
	width: 500px;
	height: 400px;
	border: 1px solid #000;
	margin: 20px auto 0;
	background: none;
}
.div1 {
	transform: translateX(400px);
  background: lightblue;
}
.div2 {
	transform: translateX(400px) scale(0.5);
  background: pink;
}
.div3 {
	transform: scale(0.5) translateX(400px);
  background: lightcoral;
}

_{^{将光标放在该区域内即可播放（移动端点击该区域）}}

^{_{（代码作了适配处理，以实际效果为准）}}

如上，默认的位移和形变的基点是中心，所以我们按照盒子的中心来做位移的衡量基点。第一个盒子为初始位置，第二个第三个都到了我们想要的位置（位移为400px），但是第四个盒子就出现了问题，位移为200px。

按照常理，不管scale和translate的顺序如何，都应该达到我们期望的位置，但是如今我们发现如果先位移，后缩放，则可以达到我们期望的位置，但是当顺序反过来，即先缩放，后位移的话，则会将位移的步长同时缩小相应的倍数（这里我们缩放到1/2，所以相应的位移从原来的400px缩放到200px）。

translate和rotate

div{
    width:100px;
    height: 100px;
    background: tomato;
    transition: 1s all ease;
}
.wrapper{
    width:500px;
    height: 600px;
    border:1px solid #000;
    margin:20px auto 0;
    background: none;
}
.div1{
    transform: translateX(200px);
    background: lightblue;
}
.div2{
    transform: translateX(200px) rotate(45deg);
    background: pink;
}
.div3{
    transform: rotate(45deg) translateX(200px);
    background: lightcoral;
    }

_{^{将光标放在该区域内即可播放（移动端点击该区域）}}

^{_{（代码作了适配处理，以实际效果为准）}}

如图，第二个第三个盒子同样达到了我们的预期，都向右移动了200px；但是第四个盒子又出现了问题，我们给的水平位移，但是在竖直方向也有了位移，不仅如此，向右移动的距离也没有200px.

其实，当我们先旋转的时候，对于盒子的坐标系也旋转了.

总结

当我们在旋转后再进行位移的时候，其实是按照旋转后的坐标系位移，在我们视觉中就产生了向右位移了一部分，向下移动了一部分。

总而言之，在transform中，当我们同时有位移和其他属性的时候，记得要将位移放到最前，先位移到我们期望的位置，然后再进行其他的形变。

版权声明：本文为CSDN博主「crazyJialin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/crazy_jialin/article/details/77969990