Полноэкранные разделы меняются с помощью translateX

Question

Я бы получил эффект как: полноэкранные разделы (слева направо), которые я могу изменить с помощью translateX.

Моя первая попытка, к сожалению, переместить всю оболочку вместо ее содержимого: https://codepen.io/anon/pen/WPzBYm

const sectionsWrapper = document.getElementById("sections-wrapper");

sectionsWrapper.style.transform = "translateX(-100px)";

html, body {
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}
.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;      
}
.section {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
.s1 {
  background-color: yellow;
}
.s2 {
  background-color: coral;
}
.s3 {
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div class="section s1">elo1</div>
  <div class="section s2">elo2</div>
  <div class="section s3">elo3</div>
</div>

Целевой эффект:

Answer 1

ПРОВЕРЬТЕ.

sectionsWrapper.style.transform = "translateY(200px)";

const sectionsWrapper = document.getElementById("sections-wrapper");

sectionsWrapper.style.transform = "translateY(200px)";

Answer 2

Я не уверен, какова ваша цель, но если вы хотите прокрутить свои разделы, попробуйте этот код:

Оригинальный код для анимации (в ванильном JavaScript) здесь: StackOverflow

//const sectionsWrapper = document.getElementById("sections-wrapper");

//sectionsWrapper.style.transform = "translateX(-100px)";



function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var wrapper = document.getElementById("sections-wrapper");
    var s2 = document.getElementById("s2");
    animate(wrapper, "scrollLeft", "", 0, s2.offsetLeft, 1000, true);
};

html, body{
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.wrapper{
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;
/*   overflow: hidden; */
  
}

.section{
  display: inline-block;
  width: 100%;
  height: 100vh;
}

.s1{
  background-color: yellow;
}

.s2{
  background-color: coral;
}

.s3{
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div id="s1" class="section s1">elo1</div>
  <div id="s2" class="section s2">elo2</div>
  <div id="s3" class="section s3">elo3</div>
</div>

Надеюсь, это поможет вам.