您好,游客注册登录繁體
首页 >> css3 >> 纯css3 transforms 3D文字翻开翻转3D开放式效果

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

Gavin 2015-03-02 0
浏览次数2197

 
 

在线预览立即下载

 

在本教程中,将基于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);
}

 

在线预览立即下载

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<