Reveal Text using rotateX

The hidden text is revealed in a way that makes it look like the top of the container has been lifted and appears nearer to you.

by cchana

HTML

<div>
    <p>This is some text</p>
    <p><span>This is more text</span></p>
    <p>This is MOAR TEXT</p>
</div>

CSS

div {
}
p:nth-child(2) {
    height: 0;
    perspective: 500px;
    transition: height 0.5s;
}
p:nth-child(2) span {
    background: #F00;
    display: block;
    transform: rotateX(271deg);
    transition: transform 0.5s;
}
div:hover p:nth-child(2) span {
    transform: rotateX(360deg);
}
div:hover p:nth-child(2) {
    height: 1em;
}