纯css3 transforms 3D文字翻开翻转3D开放式效果

详细内容请点击

   

在线预览立即下载

  在本教程中，将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。  

 

html:

<ul class="grid">
<li class="ot-letter-left"><span data-letter="C">C</span></li>
<li class="ot-letter-top"><span data-letter="J">J</span></li>
<li class="ot-letter-right"><span data-letter="8">8</span></li>
<li class="ot-letter-bottom"><span data-letter="A">A</span></li>
</ul>

css:

.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;
}
.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);
}
.ot-letter-left span:before,
.ot-letter-left span:after {
transform-origin: 0 50%;
}
.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);
}
.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;
}
.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;
}
.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);
}

在线预览立即下载

学习来源：http://tympanus.net/Tutorials/AnimatedOpeningType/

更多htnl5/css3内容请点击