Question

翻译元素Y轴50％会将其向下移动50％的高度，而不是父母身高的50％，正如我所料。如何告诉翻译元素根据父元素的翻译百分比？或者我不明白什么？

Answer 1

在翻译中使用百分比时，它指的是自身的宽度或高度。请查看https://davidwalsh.name/css-vertical-center（demo）：

CSS转换的一个有趣的事情是，当使用百分比值应用它们时，它们将该值基于它们正在实现的元素的维度，而不是像top，right，bottom，left，margin这样的属性。和padding，它只使用父级的维度（或者在绝对定位的情况下，使用其最接近的父级）。

Answer 2

您可以使用vw和vh根据视口大小进行翻译

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}

Answer 3

使用only CSS对我有用的是：

.child {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Backward compatibility */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

工作原理：

顶部和左侧定位根据父坐标移动子控件。子窗口小部件的左上角将完全出现在父级的中心（这不是我们目前想要的）。
翻译会将子窗口小部件-50％根据其大小（不是父级）移动到顶部和左侧。这意味着，小部件的中心点将被精确地移动到左上角的位置 - 之前被设置为父级的中心，这就是我们想要的。

Answer 4

要在translate属性中使用百分比，您必须使用Javascript：http://jsfiddle.net/4wqEm/27/

HTML code：

<div id="parent">
    <div id="children"></div>
</div>

CSS代码：

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Javascript代码：

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";

我希望如果你有任何其他问题，我可以帮助你并告诉我。

Answer 5

关于来自翻译元素的百分比，您的陈述绝对正确。在您的情况下，您应该使用绝对定位来保持相对于父div的代替而不是使用translate属性。我绝对在这里垂直定位你的红色div :(不要忘记相对于父div添加位置。它必须定位而不是静态默认值）：

js fiddle pen here

 body {
    margin: 0;
    width: 100%;
    height: 100%;
    }
 body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
    }
 body > div > div {
    width: 10%;
    height: 10%;
    -webkit-transform: translateY(-50%);
    background: #f00;
    position: absolute;
    top: 50%;
    }

Answer 6

您还可以使用一个额外的块并使用除子节点之外的转换

HTML code：

<div id="parent">
    <div id="childrenWrapper">    
        <div id="children"></div>
    </div>
</div>

css应该是这样的

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Answer 7

您可以使元素绝对定位，并使用left和top属性将百分比值作为父级。

Answer 8

它的分叉需要在以下URL上进行定位 working sample

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

备注：

您可以通过将父元素更改为相对位置
然后使用50％顶部和50％左边将根据其左上角定位红色方块
使用transform：translate（-50％， - 50％）将根据其中心

Answer 9

此问题的解决方案是根本不使用翻译。在翻译元素时，您选择的百分比取决于它自己的高度。

如果要根据父级的高度定位元素，请使用top：50％;

所以代码看起来像这样：

foreach($posts as $row){
    $result = glob ("posts/".$row[0]."/article-image.*");
    echo "<div class='project-list-item'>";
        echo "<img src='$result[0]' class='project-list-image' alt='Blog Item Image'>";
        echo "<div class='project-heading'>".$row[1]."</div>";
        echo "<div class='project-subheading'>".$row[2]."</div>";
    echo "</div>";
}

根据元素的高度和宽度转换X和Y百分比值？

9 个答案: