本教程是一个有趣的开关门效果，每个字母就是一个门，我们将使它能够从四个方向打开关闭，这里采用的技术主要是在伪元素上使用CSS transforms and transitions属性。
HTML结构:
- C
- J
- 8
- A
CSS样式：
为每一个字母的span添加一些基本样式。我们将会为这些字母添加3种样式，字母添加较深的颜色，使字母看起来就像是被从背景中剪出来一样；当打开字母时，阴影将出现。为了达到这些目的，我们将添加perspective属性到span上。这样就能在伪元素上实现一个很好的3d效果。
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
transform-style: preserve-3d;
perspective: 550px;
z-index: 1;
}
注意：我们添加了position:relative到span上，这是为了使伪元素能够绝对定位。
为了复制字母，我们使用content属性来接收自定义的data-attribute，然后我们将在字母上定位:before和:after伪元素。
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transition: all 0.3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
这样，现在我们有三个层：第一层是颜色较暗的字母，第二层是:before伪元素，它是在字母之上的半透明的阴影，第三层是:after伪元素，它是我们的“门”效果，我们暂时将之称为门。
现在，我们就可以制作开门效果了。首先以从右边开门为例，我们将使用transform-origin属性，确保它以门的左侧为轴旋转。
.ot-letter-left span:before,
.ot-letter-left span:after {
transform-origin: 0 50%;
}
为了使阴影层看起来逼真，我门要在Y轴的:after伪元素上添加一个3D rotation和一些垂直倾斜效果，这样一个阴影效果就做好了，最好为门添加一些厚度。
.ot-letter-left span:before {
transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after {
text-shadow:
-1px 0px 0px hsla(360, 100%, 100%, 0.1),
3px 0px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateY(-15deg);
}
真正开门的效果出现在每个li元素被:hover的时候，我们要为相应的伪元素添加更大数值得旋转和倾斜，这样，当鼠标hover的时候字母将打开，阴影也会相应的变化。
.ot-letter-left:hover span:before {
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
transform: rotateY(-40deg);
}
最后添加一些颜色使它看起来更漂亮。
.ot-letter-left {
background: #e74d3c;
}
.ot-letter-left span {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}
.ot-letter-left span:after {
color: #e74d3c;
}
.ot-letter-left:hover span:after {
color: #ea6253;
}
总之，我们可以通过transform-origin控制开门的方向,还可以控制门的旋转角度，倾斜角度等。以下是一个向下开门的例子：
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow:
0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
transform: translateY(0.045em) rotateX(40deg);
}
你会发现transform-origin总是在门轴的相反方向，调整text-shadow的原理是一样的。
