CSS：translate使用注意事项

汤姆不是猫 ... 2021-09-28

大约 1 分钟

来看一下这样一个效果

<div class="box" style="transform: translate(50px, 0);">块1</div>
<div class="box" style="transform: translate(150px, 0);">块2</div>

1
2

.box {
    width: 50px;
    height: 50px; 
    background: rgba(51, 153, 255, 0.5);
    text-align: center;
    color: #333;
}

1
2
3
4
5
6
7

Good Home Fire！👍🏻 🏠 🔥！好家伙！
什么情况，translate第二个参数都是0啊
“块2” 怎么出现垂直位移了？？？

真相只有一个！
原来transform属性并不会脱离文档流
还是会遵循块级独占一行的特征
需要注意的是行内元素对这个属性是不生效的
所以才会出现垂直位移的假象

某些场景下，可能并不希望使用position来实现位移
比如父元素也是position，那子元素就会相对于父元素位移
但并不希望这样，于是想到了transform: translate()
便出现了以上问题

解决方案有很多，以下是我解决的方法

<div class="box" style="transform: translate(50px, 0);">块1</div>
<div class="box" style="transform: translate(150px, 0);margin-left:-50px">块2</div>

1
2

.box {
    width: 50px;
    height: 50px; 
    background: rgba(51, 153, 255, 0.5);
    text-align: center;
    color: #333;
    float: left; // 设置浮动，减去一个自身宽度
}

1
2
3
4
5
6
7
8

道理就是这么个道理，别像我一样把简单的问题想复杂了
有更好的办法欢迎评论，散会！

感觉群友指点迷津@崔牛坯

CSS：translate使用注意事项

详情