求移动的元素
在对元素实现向左平移消失效果前，首先需要选择一个需要平移的元素。可以是一个图片、一个文字或者一个块元素。
推荐使用块元素，因为它包含了一个完整的盒模型，可以更好地控制它的宽高、边距、内边距等属性。另外，块元素一般都有一个默认的 display 属性值为 block，可以让元素独占一行，避免造成布局问题。
在本文中，我们将选择一个 div 元素作为需要平移的元素。
/* 选择一个需要平移的元素 */
.box {
width: 200px;
height: 200px;
background-color: #f6f6f6;
position: relative; /* 让子元素的定位以此为准 */
overflow: hidden; /* 隐藏超出部分 */
}
使用CSS3的transform属性实现平移
实现元素的向左平移可以使用 CSS3 的 transform 属性，其语法如下：
transform: translateX(水平方向的偏移量);
其中，translateX() 方法用于在水平方向上平移元素。如果方法中的参数值为负数，则元素会向左平移；如果为正数，则元素会向右平移。
为了让元素向左平移，我们需要在 CSS 中添加以下代码：
/* 初始位置 */
.box {
transform: translateX(0); /* 初始位置为 0 */
}
/* 平移后的位置 */
.box.move {
transform: translateX(-100%); /* 向左平移元素的宽度 */
transition: transform 0.5s; /* 添加过渡效果，使平移的过程变得平滑 */
}
在以上代码中，我们定义了两个 CSS 规则。第一个规则设置了初始位置为 0，第二个规则定义了平移后的位置为元素的宽度，该元素的平移过程会从初始位置平滑地过渡到目标位置，过渡时间为 0.5 秒。
触发CSS3动画
要让元素平移，我们需要使用 JavaScript 来添加一个 类名 以触发 CSS3 动画。
具体实现可以通过以下代码来实现：
var box = document.querySelector('.box');
setTimeout(function() {
box.classList.add('move'); /* 添加类名 */
}, 1000); /* 延时 1 秒执行 */
以上代码通过选择器 .box 来获取需要平移的元素，并使用 setTimeout() 方法来延时执行添加类名的操作。例如以上代码中设置的延时时间为 1000ms（即 1s），因此该操作会在 1 秒后触发。
完整代码
将以上代码整合起来，可以得到以下完整的 HTML、CSS 和 JavaScript 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>向左平移消失效果</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f6f6f6;
position: relative;
overflow: hidden;
}
.box.move {
transform: translateX(-100%);
transition: transform 0.5s;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
setTimeout(function() {
box.classList.add('move');
}, 1000);
</script>
</body>
</html>
总结
通过使用 CSS3 的 transform 属性和 JavaScript 控制类名来实现元素的向左平移消失效果。