Hide and show full size DIV containers with CSS3 transitions on translate, rather than top, right, bottom, or left offset.

index.html

<div class="container">
  <div id="page1" data-id="1" class="page">
    <h2>page 1</h2>
  </div>
  <div id="page2" data-id="2" class="page">
    <h2>page 2</h2>
  </div>
  <div id="page3" data-id="3" class="page">
    <h2>page 3</h2>
  </div>
</div>
<ul class="change-page">
  <li>
    <a id="button-1" href="#" title="button-1" class="button" data-page-id="1">page 1</a>
  </li>
  <li>
    <a id="button-2" href="#" title="button-2" class="button" data-page-id="2">page 2</a>
  </li>
  <li>
    <a id="button-3" href="#" title="button-3" class="button" data-page-id="3">page 3</a>
  </li>
</ul>

script.js

function showPage(pid) {
  $(".page").addClass("hidden").filter("[data-id='" + pid + "']").removeClass("hidden");
  return this;
}

$(".button").on("click", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  var $this = $(this);
  showPage($this.attr("data-page-id"));
  return;
});

showPage(1);

Show---Hide-full-size-divs-with-translate.markdown

Show / Hide full size divs with translate

Hide and show full size DIV containers with CSS3 transitions on translate, rather than top, right, bottom, or left offset.

A Pen by Andrea Collet on CodePen.

License.

style.scss

@import "compass";
body {
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  .container {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 100%;
    height: 100%;    
    background: #D6A1A7;
    overflow: hidden;
    .page {
      @include transition(transform 1s ease-in-out);
      @include translateX(0);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      h2 {
        color: #fff;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 50px;
        font-weight: 100;
        line-height: 1em;
        margin-left: 50px;
      }
      &.hidden {
        @include translateX(100%);
      }
      &#page1 {
        background-color: #D07187;
      }
      &#page2 {
        background-color: #D07187;
      }
      &#page3 {
        background-color: #B6D9D3;
      }
    }
  }
  .change-page {
    position: absolute;
    display: inline-block;
    right: 0;
    left: 0;
    margin: 0 auto;
    border: 0 none;
    padding: 0;
    text-align: center;
    list-style: none;
    li {
      display: inline-block;
      a {
        display: block;
        padding: 15px;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 11px;
        line-height: 1em;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        background: black;
        &:hover {
          color: black;
          background: darkgray;
        }
      }
    }
  }
}