使用 CSS 变换移动父级后，保持子级位置相同答案

【问题标题】：Keep child position the same after parent moved with CSS transform使用 CSS 变换移动父级后，保持子级位置相同
【发布时间】：2014-09-10 21:40:23
【问题描述】：

是否可以将孩子带出其转换的父母的流程？下面的简单例子：

HTML：

<div class="parent">
    <div class="child"></div>
</div>
<a href="#" id="button">Move parent</a>

CSS：

.parent {
    background: red;
    height: 200px;
    position: relative;
    transition: 0.5s ease-in-out;
    width: 200px;
}

.child {
    background: black;
    height: 100px;
    left: 0;
    top: 0;
    position: absolute;
    width: 100px;
}

.moved {
    transform: translateX(100px);
}

Javascript：

$('#button').on('click', function(e) {
    e.preventDefault();
    console.log('test');
    $('.parent').toggleClass('moved');
});

JSFiddle：http://jsfiddle.net/ous3s873/1/

非常简单的东西。基本上，父（红色框）正在使用 CSS 变换向右移动 100 像素。我想要的输出是孩子（黑盒子）将留在同一个地方，因为父母在它后面移动。

【问题讨论】：

标签： html css transform css-animations

【解决方案1】：

一种选择是向子元素添加一个否定的translateX 以使其保持原位：

Updated Demo

.moved .child {
    transform: translateX(-100px);
}

【讨论】：