如何用css3做全屏切换效果

今天从跟着网上一个老师用css3做了一个全屏切换效果，展示图如下：

当点击底部每一个导航时，对应的内容就变化，同时大标题往下，小文字向上。

其中有最重要的的是，

1.上部三角形的制作 ，每个三角形并不是一个图像，而是用特殊的文字做成 。

关键代码

<div class="nav-desc" data-icon="H"></div>

[data-icon]:after {
  content: attr(data-icon);
  width: 200px;
  height: 200px;
  color: #fff;
  font-size: 90px;
  line-height: 200px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -50px;
  -webkit-transform: translateY(25%) rotate(-45deg);
  -moz-transform: tr