div中心的CSS过渡宽度和高度

Posted 2023-03-07

【中文标题】div中心的CSS过渡宽度和高度

【英文标题】：CSS transition width and height from center of div

【发布时间】：2017-04-09 19:18:11

【问题描述】：

我有 position: absolute; 元素，我想在某些情况下进行过渡。但是，宽度和高度过渡的起点似乎取决于顶部/底部左/右值。

有什么方法可以更好地控制这个吗？

我特别希望从 div 的中心过渡。

是否有任何不依赖于转换顶部/底部左/右值的解决方案？

---

编辑：

我想保持宽度和高度的过渡。

感谢您的回答，但在这种情况下使用 变换比例不是解决方案。 Transform property 中的百分比是指元素边框的大小，而不是容器的大小。参见例如this JSFiddle，将鼠标悬停在两个元素上的最终结果有何不同。

---

JSFiddle

div, span 
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;

*:hover
  width:10%;
  height:10%;

div
  top:10%;
  left:10%;

span
  bottom:10%;
  right:10%;

<div></div>
<span></span>

【问题讨论】：

你玩过transition-origin 的各种值吗？喜欢transition-origin: 50% 50%;？

Just did。好像没什么效果。

我明白了。问题是您的元素仍然基于顶部/左侧位置放置，并且不受过渡的影响。唯一想到的就是调整:hover 的左/上属性，或者使用scale()。

像这样：jsfiddle.net/36hhyvkg/2

transform: scale 可以完成这项工作，您只需要正确使用它即可。您展示比例如何在元素上工作的小提琴，而不是它的容器，有一个很大的缺陷，使用宽度/高度调整大小的样本设置为 33%（从 30 到 10），因此比例应该匹配是 0.33，而不是 0.1 ...更新小提琴jsfiddle.net/6gyp3f7k/1

【参考方案1】：

这是你想要达到的目标吗？使用translate会根据元素本身的宽度和高度改变元素的位置。

div, span 
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
  transform: translate(-50%, -50%);

*:hover
  width:10%;
  height:10%;

div
  top:25%;
  left:25%;

span
  top:75%;
  left:75%;

<div></div>
<span></span>

【讨论】：

这太神奇了，我不明白你的答案受欢迎程度低..

【参考方案2】：

最好的方法是使用矩阵，这可以让你结合转换和转换。 矩阵有 6 个参数

变换：矩阵（a，b，c，d，e，f）；

在哪里

a= 缩放 X 轴

b=skewX

c=skewY

d= 缩放 Y 轴

e= X 位置

f= Y 位置

在这种情况下，我将 X 轴上的比例（这将改变宽度）设置为悬停后初始宽度的两倍。 （值 2 表示初始比例乘以 2） Y 轴上的比例没有改变（值 1 表示初始比例乘以 1，因此高度不会改变）其余参数为 0，因为在这种情况下您不需要使用它们。

.example 
  width: 30%;
  height: 30%;
  background-color: pink;
  position: absolute;
  top: 35%;
  left: 35%;
  transition: width, height, transform 1s;

.example:hover 
  transform: matrix(2, 0, 0, 1, 0, 0);

<div class="example"></div>

【参考方案3】：

您可以尝试使用transform: translate(-50%, -50%); 看看是否有帮助。

.example 
  width: 30%;
  height: 30%;
  background: pink;
  transition: all 1s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

.example:hover 
  width: 10%;
  height: 10%;

<div class="example"></div>

【参考方案4】：

不确定这是否正是您要寻找的，但此解决方案不是基于transform: scale，您可以手动设置悬停时 div 的所需宽度和高度，甚至以百分比表示。

而且百分比是相对于容器的宽度而言的。

HTML

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

#container
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;


.box
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;


.box:hover
  width: 7%;
  height: 10%;


.box:nth-child(2)
  left: 20%;


.box:nth-child(3)
  top: 20%;


.box:nth-child(4)
  top: 20%;
  left: 20%;

#container 
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;

.box 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;

.box:hover 
  width: 7%;
  height: 10%;

.box:nth-child(2) 
  left: 20%;

.box:nth-child(3) 
  top: 20%;

.box:nth-child(4) 
  top: 20%;
  left: 20%;

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【参考方案5】：

你可以同时改变位置来模拟效果。但我和其他人在一起：transform: scale 是解决这个问题的更好方法。

div, span 
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;

div
  top:10%;
  left:10%;

div:hover
  width:10%;
  height:10%;
  top: 20%;
  left: 20%;

span
  bottom:10%;
  right:10%;

span:hover
  width:10%;
  height:10%;
  bottom: 20%;
  right: 20%;

<div></div>
<span></span>

带变换的版本：

div, span 
  width:30%;
  height:30%;
  background: red;
  transition: all 1s ease;
  position: absolute;

div
  top:10%;
  left:10%;

div:hover
  transform-origin: 50% 50%;
  transform: scale(0.3);

span
  bottom:10%;
  right:10%;

span:hover
  transform-origin: 50% 50%;
  transform: scale(0.3);

<div></div>
<span></span>

【讨论】：

谢谢乔迪。这是我的想法，但让我们看看其他人是否有其他方法。正如我在其他评论中所说，Transform 中的百分比指的是元素本身，而不是容器，因此它不是解决方案。

我使用转换添加了一个新的 sn-p，@Alvaro

【参考方案6】：

我建议在动画位置时使用transform: translate，因为它是better for performance，然后您可以使用transform-origin 控制它的原点。

如果你想改变宽度或高度，同样可以使用transform: scale。

假设你想从中心向外加倍大小。那么你只需要写transform: scale(2.0)，因为transform-origin的默认值是50% 50%。

在此处查看示例：https://jsfiddle.net/ydpx284g/

【讨论】：

能否请您详细说明一下。

【参考方案7】：

好吧，你总是可以使用 transform - scale 来解决这个问题：

div 
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;

div:hover
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);

<div></div>

【讨论】：

谢谢，但我想使用宽度和高度值更改。

宽度和高度为元素的内容，从左到右，从上到下。您可以使用关键帧实现这种动画，同时为左/右/上/下边距设置动画，还可以使用另一个包装元素来保持动画的方向。但是有很多样板代码。我相信 transform + scale 是最好的解决方案——对于不支持此功能的浏览器（1% 的用户），他们只是不会显示动画，仅此而已。

因为我使用的是百分比。 Transform 中的百分比指的是元素本身，而不是容器。 （而且我不想使用 javascript 来设置确切的比例值）。