首页 文章

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

提问于
浏览 次
8

我有 position: absolute; 的元素，我想在某些情况下转换 . 但是，宽度和高度过渡的原点似乎取决于上/下左/右值 .

Is there any way to have more control over this?

我特意想从div的中心过渡 .

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

Edit ：

我想保持宽度和高度过渡 .

谢谢你的答案，但在这种情况下使用 Transform scale is not a solution . 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>
html css css3 css-transitions

6 回答

  • 2

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

    如果你想改变宽度或高度，你可以类似地使用 transform: scale .

    假设您想从中心向外扩大尺寸 . 然后你只需要写 transform: scale(2.0) ，因为 transform-origin 的默认值是 50% 50% .

    见这里的例子：https://jsfiddle.net/ydpx284g/

    回复于
  • 3

    最好的方法是使用矩阵，这允许您组合过渡和变换 . 矩阵有6个参数

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

    哪里

    a =比例X轴

    b = skewX

    c =偏斜

    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>
    回复于
  • 4

    您可以尝试使用 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>
    回复于
  • 0

    不确定这是否正是您正在寻找的，但此解决方案不是基于 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>
    回复于
  • 1

    好吧，你可以随时使用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>
    回复于
  • 1

    您可以同时更改位置以模拟效果 . 但我和其他人在一起： 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>
    回复于

相关问题