• R
    • T
    • L
    • B
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>css3 transforms 3D文字翻开</title>
  6. </head>
  7.  
  8. <body>
  9. <div class="component">
  10.   <ul class="grid">
  11.     <li class="ot-letter-left"><span data-letter="R">R</span></li>
  12.     <li class="ot-letter-top"><span data-letter="T">T</span></li>
  13.     <li class="ot-letter-right"><span data-letter="L">L</span></li>
  14.     <li class="ot-letter-bottom"><span data-letter="B">B</span></li>
  15.   </ul>
  16. </div>
  17. <style>
  18. ul,li{ list-style:none;}.grid {
  19.     list-style: outside none none;
  20.     margin: 0;
  21.     padding: 0;
  22.     position: relative;
  23.     width: 100%;
  24. }
  25. .grid li {
  26.     float: left;
  27.     font-size: 12em;
  28.     line-height: 1.5;
  29.     max-height: 290px;
  30.     position: relative;
  31.     text-align: center;
  32.     width: calc(100% / 6);
  33. }
  34. .grid li span {
  35.     color: hsla(0, 0%, 0%, 0.6);
  36.     display: inline-block;
  37.     font-weight: 900;
  38.     line-height: 1;
  39.     perspective: 550px;
  40.     position: relative;
  41.     transform-style: preserve-3d;
  42.     z-index: 1;
  43. }
  44. .grid li span::before, .grid li span::after {
  45.     bottom: 0;
  46.     content: attr(data-letter);
  47.     left: 0;
  48.     line-height: inherit;
  49.     position: absolute;
  50.     right: 0;
  51.     top: 0;
  52.     transition: all 0.3s ease 0s;
  53.     z-index: 2;
  54. }
  55. .grid li span::before {
  56.     color: hsla(0, 0%, 0%, 0.12);
  57.     text-shadow: none;
  58. }
  59. .ot-letter-left {
  60.     background: none repeat scroll 0 0 #e74d3c;
  61. }
  62. .ot-letter-left span {
  63.     text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c;
  64. }
  65. .ot-letter-left span::after {
  66.     color: #e74d3c;
  67. }
  68. .ot-letter-left:hover span::after {
  69.     color: #ea6253;
  70. }
  71. .ot-letter-right {
  72.     background: none repeat scroll 0 0 #ea6657;
  73. }
  74. .ot-letter-right span {
  75.     text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657;
  76. }
  77. .ot-letter-right span::after {
  78.     color: #ea6657;
  79. }
  80. .ot-letter-right:hover span::after {
  81.     color: #ed7a6e;
  82. }
  83. .ot-letter-top {
  84.     background: none repeat scroll 0 0 #ee7f72;
  85. }
  86. .ot-letter-top span {
  87.     text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72;
  88. }
  89. .ot-letter-top span::after {
  90.     color: #ee7f72;
  91. }
  92. .ot-letter-top:hover span::after {
  93.     color: #f09389;
  94. }
  95. .ot-letter-bottom {
  96.     background: none repeat scroll 0 0 #e95949;
  97. }
  98. .ot-letter-bottom span {
  99.     text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949;
  100. }
  101. .ot-letter-bottom span::after {
  102.     color: #e95949;
  103. }
  104. .ot-letter-bottom:hover span::after {
  105.     color: #eb6e60;
  106. }
  107. .ot-letter-left span::before, .ot-letter-left span::after {
  108.     transform-origin: 0 50% 0;
  109. }
  110. .ot-letter-left span::before {
  111.     transform: scale(1.08, 1) skew(0deg, 1deg);
  112. }
  113. .ot-letter-left span::after {
  114.     text-shadow: -1px 0 0 hsla(0, 100%, 100%, 0.1), 3px 0 1px hsla(0, 0%, 0%, 0.4);
  115.     transform: rotateY(-15deg);
  116. }
  117. .ot-letter-left:hover span::before {
  118.     transform: scale(0.85, 1) skew(0deg, 20deg);
  119. }
  120. .ot-letter-left:hover span::after {
  121.     transform: rotateY(-40deg);
  122. }
  123. .ot-letter-right span::before, .ot-letter-right span::after {
  124.     transform-origin: 100% 50% 0;
  125. }
  126. .ot-letter-right span::before {
  127.     transform: scale(0.85, 1) skew(0deg, 1deg);
  128. }
  129. .ot-letter-right span::after {
  130.     text-shadow: 1px 0 0 hsla(0, 100%, 100%, 0.1), -3px 0 1px hsla(0, 0%, 0%, 0.4);
  131.     transform: rotateY(15deg);
  132. }
  133. .ot-letter-right:hover span::before {
  134.     transform: scale(0.85, 1) skew(0deg, -20deg);
  135. }
  136. .ot-letter-right:hover span::after {
  137.     transform: rotateY(40deg);
  138. }
  139. .ot-letter-top span::before, .ot-letter-top span::after {
  140.     transform-origin: 50% 100% 0;
  141. }
  142. .ot-letter-top span::before {
  143.     transform: scale(1, 0.95) skew(-4deg, 0deg);
  144. }
  145. .ot-letter-top span::after {
  146.     text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.1), 0 -3px 1px hsla(0, 0%, 0%, 0.4);
  147.     transform: rotateX(-15deg);
  148. }
  149. .ot-letter-top:hover span::before {
  150.     transform: translateY(-0.05em) scale(1, 0.55) skew(-10deg, 0deg);
  151. }
  152. .ot-letter-top:hover span::after {
  153.     transform: translateY(-0.035em) rotateX(-40deg);
  154. }
  155. .ot-letter-bottom span::before, .ot-letter-bottom span::after {
  156.     transform-origin: 50% 0 0;
  157. }
  158. .ot-letter-bottom span::before {
  159.     transform: scale(1, 1.05) skew(4deg, 0deg);
  160. }
  161. .ot-letter-bottom span::after {
  162.     text-shadow: 0 -1px 0 hsla(0, 100%, 100%, 0.1), 0 3px 1px hsla(0, 0%, 0%, 0.4);
  163.     transform: rotateX(15deg);
  164. }
  165. .ot-letter-bottom:hover span::before {
  166.     transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
  167. }
  168. .ot-letter-bottom:hover span::after {
  169.     transform: translateY(0.045em) rotateX(40deg);
  170. }
  171. </style>
  172. </body>
  173. </html>

CSS3 transforms 3D翻开的更多相关文章

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

    详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...

  2. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  3. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  4. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  5. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  7. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  8. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  9. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

随机推荐

  1. [CareerCup] 10.5 Web Crawler 网络爬虫

    10.5 If you were designing a web crawler, how would you avoid getting into infinite loops? 这道题问如果让我们 ...

  2. Android响应式界面开发要点

    现在很多项目需要到达同一个Apk既可以在Phone上跑也尅在tablet上跑,即界面要适应不同尺寸和类型的需要而自动调整.这个即为响应式设计.在web开发商响应式设计已经是个常谈的内容了,而对于and ...

  3. 如何区分 OpenStack Neutron Extension 和 Plugin

    Neutron 里面的 extension 和 plugin 是非常相似的两个概念,我花了好久才貌似搞懂了两者的区别,还不一定完全正确. 在OpenStack 的官网wiki中,可以找到它们两个的定义 ...

  4. windows程序防狼术入门

    当初由于一些原因以及兴趣,学习了一段时间软件逆向,对于软件加密解密有了点粗略的了解.而后看到某些同学辛辛苦苦的搞出个软件,自己费心费力去加密,但搞出来后往往能被秒破,实不忍心.今天大概总结下一些基本的 ...

  5. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  6. 网页爬虫--scrapy进阶

    本篇将谈一些scrapy的进阶内容,帮助大家能更熟悉这个框架. 1. 站点选取 现在的大网站基本除了pc端都会有移动端,所以需要先确定爬哪个. 比如爬新浪微博,有以下几个选择: www.weibo.c ...

  7. android之imgView插件的使用

    在开发中我们经常要用到图片下载功能,但我们可以在github上淘一些比较好的插件,这里介绍一款叫smartImageView的插件. 这里是其地址https://github.com/loopj/an ...

  8. DOM系列---进阶篇

    内容提纲: 1.DOM类型 2.DOM扩展 3.DOM操作内容 一．DOM类型 DOM基础篇中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型.   DOM类 ...

  9. AngularJS开发指南2：AngularJS初始化过程

    自动初始化 请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中.比如:<html ng ...

  10. JDO持久 （jdbc ejb）

    转自:http://blog.csdn.net/liuzhigang1237/article/details/6305113 JDO快速入门 Java数据对象(Java Data Objects,JD ...