|
[tr][td] 之前在网上看到一款比较有新意的HTML5文字特效，文字效果是当鼠标滑过是出现翻开折叠的效果，类似书本翻页。于是我兴致勃勃的点开源码看了一下，发现其实实现也挺简单的，主要利用了CSS3的transform属性，分别对X轴、Y轴、Z轴进行翻转，先看一下效果截图。
图片：113635xd3dg4lr4gldhhhx.jpg  看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。 DEMO演示效果 接下来我们来看一下源码。首先是HTML代码，非常简单，列出我们需要渲染的文字： [*] [*] A [*] B [*] C [*] D [*] E [*] F [*] G [*] H [*] I [*] L [*] M [*] N [*] O [*] P [*] Q [*] R [*] S [*] T [*] U [*] V [*] Z [*] 复制代码 接下来是核心CSS3代码，这里我们略去了控制页面样式的CSS代码，把实现翻页效果文字的CSS代码提取出来。 [*].letter{ [*] display: inline-block; [*] font-weight: 900; [*] font-size: 8em; [*] margin: 0.2em; [*] position: relative; [*] color: #00B4F1; [*] transform-style: preserve-3d; [*] perspective: 400; [*] z-index: 1; [*]} 复制代码 这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。 接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。 [*].letter:before, .letter:after{ [*] position:absolute; [*] content: attr(data-letter); [*] transform-origin: top left; [*] top:0; [*] left:0; [*]} [*].letter, .letter:before, .letter:after{ [*] transition: all 0.3s ease-in-out; [*]} [*].letter:before{ [*] color: #fff; [*] text-shadow: [*] -1px 0px 1px rgba(255,255,255,.8), [*] 1px 0px 1px rgba(0,0,0,.8); [*] z-index: 3; [*] transform: [*] rotateX(0deg) [*] rotateY(-15deg) [*] rotateZ(0deg); [*]} [*].letter:after{ [*] color: rgba(0,0,0,.11); [*] z-index:2; [*] transform: [*] scale(1.08,1) [*] rotateX(0deg) [*] rotateY(0deg) [*] rotateZ(0deg) [*] skew(0deg,1deg); [*]} [*].letter:hover:before{ [*] color: #fafafa; [*] transform: [*] rotateX(0deg) [*] rotateY(-40deg) [*] rotateZ(0deg); [*]} [*].letter:hover:after{ [*] transform: [*] scale(1.08,1) [*] rotateX(0deg) [*] rotateY(40deg) [*] rotateZ(0deg) [*] skew(0deg,22deg); [*]} [*] [*]复制代码 复制代码 这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母，然后利用transform属性的rotateX，rotateY，rotateZ来翻转，再利用skew来时文字倾斜。 转自：http://www.cnblogs.com/html5tricks/p/3653672.html [/td][/tr] |
|
