<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="Words"> <li class="Words-line"> <p> </p> <p>CSS Only</p> </li> <li class="Words-line"> <p>CSS Only</p> <p>Perspective</p> </li> <li class="Words-line"> <p>Perspective</p> <p>Text Effect</p> </li> <li class="Words-line"> <p>Text Effect</p> <p>by</p> </li> <li class="Words-line"> <p>by</p> <p>James</p> </li> <li class="Words-line"> <p>James</p> <p>Bosworth</p> </li> <li class="Words-line"> <p>Bosworth</p> <p> </p> </li> </ul>

/* ** Change this if you need to modify ** the amount of lines displayed */ /* ** Leave these unless you want ** to open a whole can of worms */ /* ** Set up the experiment */ html { background-color: #5138BE; height: 100%; } body { color: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: flex; } /* ** Apply styles to the parent element */ .Words { margin: 0 auto; padding: 80px 0; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 68px; font-weight: 900; letter-spacing: -2px; text-transform: uppercase; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-font-smoothing: antialiased; -webkit-font-kerning: normal; -webkit-text-size-adjust: 100%; } /* ** Apply common styles to each line of text */ .Words-line { height: 50px; overflow: hidden; position: relative; } .Words-line:nth-child(odd) { -webkit-transform: skew(60deg, -30deg) scaleY(0.66667); transform: skew(60deg, -30deg) scaleY(0.66667); } .Words-line:nth-child(even) { -webkit-transform: skew(0deg, -30deg) scaleY(1.33333); transform: skew(0deg, -30deg) scaleY(1.33333); } .Words-line:nth-child(1) { left: 29px; } .Words-line:nth-child(2) { left: 58px; } .Words-line:nth-child(3) { left: 87px; } .Words-line:nth-child(4) { left: 116px; } .Words-line:nth-child(5) { left: 145px; } .Words-line:nth-child(6) { left: 174px; } .Words-line:nth-child(7) { left: 203px; } /* ** Fine-grained text styles */ p { height: 50px; line-height: 45px; padding: 0 10px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); vertical-align: top; white-space: nowrap; } /* ** The hover interaction */ .Words:hover p { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); }