Make text scroll only a section of a HTML page

Hi I'm trying to make text scroll along the side of a page for only part of a section. So I have three sections and once I reach that section it stops and the next begins scrolling on the opposite side. I'm working on a personal website and I'm struggling on where to begin code wise.

I have a http://ift.tt/1M0BDwD to help?

I have three more sections but I only attached one thinking it might be easier. I also can't get the rotate to work for some reason. Did I miss something simple and basic?

CSS:

#vertical-text1 {
    transform: rotate(-90deg);
    transform-origin: left top;
    margin-top: 20px;
    position: relative;
    font-size: 5em;
    color: #000;

}

.photoset {
    width: 1050px;
    margin: 0 auto;
}

HTML:

<div id="vertical-text1"> Print Media </div>

<div class="photoset" data-layout="131">
  <img src="img/nature1.jpg" width="1000" height="1000" data-highres="img/nature1.jpg">
   <img src="img/nature2.jpg" width="333.3" height="333.3" data-highres="img/nature2.jpg">
  <img src="img/nature3.jpg" width="333.3" height="333.3" data-highres="img/nature3.jpg">
  <img src="img/nature4.jpg" width="333.3" height="333.3" data-highres="img/nature4.jpg">
  <img src="img/nature5.jpg" width="1000" height="1000" data-highres="img/nature5.jpg">
</div>
      </div>

I know the images are blank but that's the sizing I'm planning on so even though they're empty, they're scaled to size.