CSS3 transforms 3D翻开

浏览数：21 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3 transforms 3D文字翻开</title>
</head>

<body>
<div class="component">
  <ul class="grid">
    <li class="ot-letter-left"><span data-letter="R">R</span></li>
    <li class="ot-letter-top"><span data-letter="T">T</span></li>
    <li class="ot-letter-right"><span data-letter="L">L</span></li>
    <li class="ot-letter-bottom"><span data-letter="B">B</span></li>
  </ul>
</div>
<style>
ul,li{ list-style:none;}.grid {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.grid li {
    float: left;
    font-size: 12em;
    line-height: 1.5;
    max-height: 290px;
    position: relative;
    text-align: center;
    width: calc(100% / 6);
}
.grid li span {
    color: hsla(0, 0%, 0%, 0.6);
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    perspective: 550px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
}
.grid li span::before, .grid li span::after {
    bottom: 0;
    content: attr(data-letter);
    left: 0;
    line-height: inherit;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    z-index: 2;
}
.grid li span::before {
    color: hsla(0, 0%, 0%, 0.12);
    text-shadow: none;
}
.ot-letter-left {
    background: none repeat scroll 0 0 #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;
}
.ot-letter-right {
    background: none repeat scroll 0 0 #ea6657;
}
.ot-letter-right span {
    text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657;
}
.ot-letter-right span::after {
    color: #ea6657;
}
.ot-letter-right:hover span::after {
    color: #ed7a6e;
}
.ot-letter-top {
    background: none repeat scroll 0 0 #ee7f72;
}
.ot-letter-top span {
    text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72;
}
.ot-letter-top span::after {
    color: #ee7f72;
}
.ot-letter-top:hover span::after {
    color: #f09389;
}
.ot-letter-bottom {
    background: none repeat scroll 0 0 #e95949;
}
.ot-letter-bottom span {
    text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949;
}
.ot-letter-bottom span::after {
    color: #e95949;
}
.ot-letter-bottom:hover span::after {
    color: #eb6e60;
}
.ot-letter-left span::before, .ot-letter-left span::after {
    transform-origin: 0 50% 0;
}
.ot-letter-left span::before {
    transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span::after {
    text-shadow: -1px 0 0 hsla(0, 100%, 100%, 0.1), 3px 0 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateY(-15deg);
}
.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-right span::before, .ot-letter-right span::after {
    transform-origin: 100% 50% 0;
}
.ot-letter-right span::before {
    transform: scale(0.85, 1) skew(0deg, 1deg);
}
.ot-letter-right span::after {
    text-shadow: 1px 0 0 hsla(0, 100%, 100%, 0.1), -3px 0 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateY(15deg);
}
.ot-letter-right:hover span::before {
    transform: scale(0.85, 1) skew(0deg, -20deg);
}
.ot-letter-right:hover span::after {
    transform: rotateY(40deg);
}
.ot-letter-top span::before, .ot-letter-top span::after {
    transform-origin: 50% 100% 0;
}
.ot-letter-top span::before {
    transform: scale(1, 0.95) skew(-4deg, 0deg);
}
.ot-letter-top span::after {
    text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.1), 0 -3px 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateX(-15deg);
}
.ot-letter-top:hover span::before {
    transform: translateY(-0.05em) scale(1, 0.55) skew(-10deg, 0deg);
}
.ot-letter-top:hover span::after {
    transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span::before, .ot-letter-bottom span::after {
    transform-origin: 50% 0 0;
}
.ot-letter-bottom span::before {
    transform: scale(1, 1.05) skew(4deg, 0deg);
}
.ot-letter-bottom span::after {
    text-shadow: 0 -1px 0 hsla(0, 100%, 100%, 0.1), 0 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);
}
</style>
</body>
</html>