Tiltlist

index.html

<div class="toggle">
  <a class="skew active" href="#0">Skew</a>
  <a class="rotate" href="#0">Rotate</a>
</div>

<ul class="tiltlist skew">
  <li>
    <h2><a href="https://landsurveyorsunited.com/inspire">Add Posts</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12342446496?profile=RESIZE_584x" alt="Add Posts">
    <p>Share your thoughts and ideas with the community by adding new posts.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/futurists">Futurists</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12562659694?profile" alt="Futurists">
    <p>Join the discussion on future trends and innovations in land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/georadio">GeoRadio</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12343413687?profile=RESIZE_584x" alt="GeoRadio">
    <p>Listen to the latest discussions and updates on GeoRadio.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/hubs/jobs=join">Surveying Jobs</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12754091280?profile=RESIZE_584x" alt="Surveying Jobs">
    <p>Explore job opportunities in the field of land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/points/blogpost/new">Survey Points</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12754125272?profile=RESIZE_584x" alt="Survey Points">
    <p>Create and share your own survey points with the community.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/marketplace">Surveyor Market</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12754109879?profile=RESIZE_584x" alt="Surveyor Market">
    <p>Buy and sell surveying equipment and services in the marketplace.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/tools">Surveying Tools</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12754151498?profile=RESIZE_584x" alt="Surveying Tools">
    <p>Access a variety of tools essential for land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/worldsurveyors">Surveyor Post Map</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12763984698?profile=RESIZE_584x" alt="Surveyor Post Map">
    <p>View and contribute to the global map of surveyor posts.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/worldmap">Surveyor World Map</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12763984855?profile=RESIZE_584x" alt="Surveyor World Map">
    <p>Explore the world map showcasing surveyor locations.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/photo">Surveying Photos</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700324468?profile=RESIZE_584x" alt="Surveying Photos">
    <p>Browse through a collection of photos related to land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/topics/total-stations">Total Stations</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700316881?profile=RESIZE_584x" alt="Total Stations">
    <p>Learn about and discuss the use of total stations in surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/basicsoflandsurveying">Surveying Video Tutorials</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700333066?profile=RESIZE_584x" alt="Surveying Video Tutorials">
    <p>Watch tutorials on the basics of land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/surveyors">Members Land Surveyors</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12342417679?profile=RESIZE_584x" alt="Members Land Surveyors">
    <p>Connect with other land surveyors in the community.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/localsurveyors">Surveyor Atlas</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700324674?profile=RESIZE_584x" alt="Surveyor Atlas">
    <p>Discover local surveyors through the Surveyor Atlas.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/hubs/Locations">Chapter Hubs</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12342413666?profile=RESIZE_584x" alt="Chapter Hubs">
    <p>Join your local chapter hub for networking and resources.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Drone%20Surveying">Drone Surveying</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12343409489?profile=RESIZE_584x" alt="Drone Surveying">
    <p>Explore the use of drones in modern land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/L.E.A.R.N%20Surveying">L.E.A.R.N Surveying</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12674239500?profile=RESIZE_584x" alt="L.E.A.R.N Surveying">
    <p>Engage in the L.E.A.R.N program for surveying education.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Geolocation%20Tools">Geolocation Tools</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12674241858?profile=RESIZE_584x" alt="Geolocation Tools">
    <p>Utilize geolocation tools for precise surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Add%20a%20Point">Add a Point</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12674242270?profile=RESIZE_584x" alt="Add a Point">
    <p>Contribute data points to the community map.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Survey%20Points%20Map">Survey Points Map</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12674242469?profile=RESIZE_584x" alt="Survey Points Map">
    <p>Explore the map of survey points shared by the community.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Become%20Ambassador">Become Ambassador</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700315882?profile=RESIZE_584x" alt="Become Ambassador">
    <p>Join the ambassador program to represent land surveyors worldwide.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Sage%20Older%20Surveyors%20Forum">Sage Older Surveyors Forum</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12738004296?profile=RESIZE_584x" alt="Sage Older Surveyors Forum">
    <p>Connect with experienced surveyors in the Sage forum.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Young%20Surveyors%20Forum">Young Surveyors Forum</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12738004669?profile=RESIZE_584x" alt="Young Surveyors Forum">
    <p>Join the Young Surveyors Forum to connect with peers.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/GIS%20Hub%20for%20Land%20Surveyors">GIS Hub for Land Surveyors</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700325071?profile=RESIZE_584x" alt="GIS Hub for Land Surveyors">
    <p>Access resources and discussions related to GIS in surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Mentorship%20Hub">Mentorship Hub</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700325275?profile=RESIZE_584x" alt="Mentorship Hub">
    <p>Get guidance and support from experienced mentors in surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Calculators%20and%20Data%20Collection">Calculators and Data Collection</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700347485?profile=RESIZE_584x" alt="Calculators and Data Collection">
    <p>Utilize calculators and data collection tools for your projects.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Mentorship%20Hub%20for%20Land%20Surveyors">Mentorship Hub for Land Surveyors</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700347501?profile=RESIZE_584x" alt="Mentorship Hub for Land Surveyors">
    <p>Another place to connect with mentors dedicated to land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Icon%2042">Icon 42</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700375271?profile=RESIZE_584x" alt="Icon 42">
    <p>Discover the meaning and significance of Icon 42 in surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Total%20Stations%20for%20Sale">Total Stations for Sale</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700352465?profile=RESIZE_584x" alt="Total Stations for Sale">
    <p>Find total stations available for purchase from the community.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Land%20Surveyor%20Dictionary">Land Surveyor Dictionary</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700352498?profile=RESIZE_584x" alt="Land Surveyor Dictionary">
    <p>Access a comprehensive dictionary of land surveying terms.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Land%20Surveyors%20Seeking%20Employment">Land Surveyors Seeking Employment</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700352869?profile=RESIZE_584x" alt="Land Surveyors Seeking Employment">
    <p>Find job opportunities or post your availability for employment.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Surveying%20Students">Surveying Students</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700352291?profile=RESIZE_584x" alt="Surveying Students">
    <p>Resources and forums for students pursuing a career in surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/GPS%20GNSS">GPS/ GNSS</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700353266?profile=RESIZE_584x" alt="GPS/ GNSS">
    <p>Explore GPS and GNSS technologies in land surveying.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Apps%20and%20Tools">Apps and Tools</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700353278?profile=RESIZE_584x" alt="Apps and Tools">
    <p>Find apps and tools to aid in your land surveying tasks.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/Surveying%20Community%20Feeds%20Reader">Surveying Community Feeds Reader</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700353291?profile=RESIZE_584x" alt="Surveying Community Feeds Reader">
    <p>Stay updated with community posts through the feeds reader.</p>
  </li>
  <li>
    <h2><a href="https://landsurveyorsunited.com/hubs/Education">Surveying Education</a></h2>
    <img src="https://storage.ning.com/topology/rest/1.0/file/get/12700353695?profile=RESIZE_584x" alt="Surveying Education">
    <p>Access educational resources and courses on land surveying.</p>
  </li>
</ul>

script.js

var toggle = $('.toggle'),
    tiltlist = $('.tiltlist');

toggle.find('a').on('click', function() {
  var self = $(this); self.addClass('active').siblings('.active').removeClass('active');
  tiltlist.attr('class', 'tiltlist ' + self.attr('class'));
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* Fonts */

@import url(https://fonts.googleapis.com/css?family=Exo+2:400,700);


/* Basic Reset */

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Structure */

body {
  font: 87.5%/1.389em 'Exo 2', sans-serif;
  color: #000;
  background: #222;
}

h2, p { margin-bottom: 1em; }

.toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
img {width:100px;}
.toggle a {
  position: relative;
  float: left; display: block;
  width: 32px; height: 32px;
  text-indent: -9999px;
  background: #222;
  box-shadow: inset 0 0 0 2px #eee;
  cursor: pointer;
}
.toggle a.active {
  background: #eee;
  cursor: default;
}

.toggle .skew { border-radius: 3px 0 0 3px; }
.toggle .rotate { border-radius: 0 3px 3px 0; }

.toggle .skew:after ,
.toggle .rotate:after {
  content: '';
  position: absolute;
  top: 11px; left: 11px;
  display: block;
  width: 10px; height: 10px;
  background: #eee;
}

.toggle .skew:after { transform: skewY(-20deg); }
.toggle .rotate:after { transform: rotate(-20deg); }

.toggle .skew.active:after { background: #ff5454; }
.toggle .rotate.active:after { background: #00b5d9; }

.tiltlist {
  list-style: none;
  position: relative;
  max-width: 220px;
  margin: 0 auto;
  overflow: hidden;
}
p {max-width: 215px;}
.tiltlist:before,
.tiltlist:after {
  content: '';
  position: absolute;
  display: block;
  width: 110%; height: 50px;
  margin-left: -15px;
  background: #ff9900;
} 

.tiltlist:before { top: -50px; }
.tiltlist:after { bottom: -50px; }

.tiltlist li {
  padding: 2em 3em 1em; margin: 10px 0 10px -15px;
  width: 220px;
  background: #111827;
  color:white;
  transition: transform 250ms;
}
.tiltlist li a {color:#ff6600;text-decoration:none;}
.tiltlist.skew:before,
.tiltlist.skew:after,
.tiltlist.skew li { transform: skewY(-18deg); }

.tiltlist.rotate:before,
.tiltlist.rotate:after,
.tiltlist.rotate li { transform: rotate(-8deg); }


/* Theme */

.tiltlist li:nth-child(2n) h2 { color: #00b5d9; }
.tiltlist li:nth-child(2n+1) h2 { color: #ff5454; }

tiltlist.markdown

Tiltlist

Add some flair to your list view with CSS Transform (Skew or Rotate).

A Pen by K_Innov on CodePen.

License.