欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯css3 transforms 3D文字翻开翻转3D开放式效果_html/css_WEB-ITnose

程序员文章站 2022-05-21 08:07:57
...
详细内容请点击

在线预览立即下载

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


html:


  • C

  • J

  • 8

  • A



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内容请点击