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

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

在线预览   立即下载AnimatedOpeningType.zip

html:

  1. <ul class="grid">
  2.         <li class="ot-letter-left"><span data-letter="C">C</span></li>
  3.         <li class="ot-letter-top"><span data-letter="J">J</span></li>
  4.         <li class="ot-letter-right"><span data-letter="8">8</span></li>
  5.         <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
  6. </ul>
复制代码
css:

  1. .grid li span {
  2.         display: inline-block;
  3.         font-weight: 900;
  4.         line-height: 1;
  5.         position: relative;
  6.         color: hsla(0, 0%, 0%, 0.6);
  7.         transform-style: preserve-3d;
  8.         perspective: 550px;
  9.         z-index: 1;
  10. }
  11. .grid li span:before,
  12. .grid li span:after {
  13.         position: absolute;
  14.         content: attr(data-letter);
  15.         line-height: inherit;
  16.         top: 0;
  17.         left: 0;
  18.         right: 0;
  19.         bottom: 0;
  20.         z-index: 2;
  21.         transition: all 0.3s;
  22. }

  23. .grid li span:before {
  24.         text-shadow: none;
  25.         color: hsla(0, 0%, 0%, 0.12);
  26. }
  27. .ot-letter-left span:before,
  28. .ot-letter-left span:after {
  29.         transform-origin: 0 50%;
  30. }
  31. .ot-letter-left span:before {
  32.         transform: scale(1.08, 1) skew(0deg, 1deg);
  33. }

  34. .ot-letter-left span:after {
  35.         text-shadow:
  36.                 -1px 0px 0px hsla(360, 100%, 100%, 0.1),
  37.                 3px 0px 1px hsla(0, 0%, 0%, 0.4);
  38.         transform: rotateY(-15deg);
  39. }
  40. .ot-letter-left:hover span:before {
  41.         transform: scale(0.85,1) skew(0deg,20deg);
  42. }

  43. .ot-letter-left:hover span:after {
  44.         transform: rotateY(-40deg);
  45. }
  46. .ot-letter-left {
  47.         background: #e74d3c;
  48. }

  49. .ot-letter-left span {
  50.         text-shadow:
  51.                 1px 4px 6px #e74d3c,
  52.                 0 0 0 hsla(0, 0%, 0%, 0.3),
  53.                 1px 4px 6px #e74d3c;
  54. }

  55. .ot-letter-left span:after {
  56.         color: #e74d3c;
  57. }

  58. .ot-letter-left:hover span:after {
  59.         color: #ea6253;
  60. }
  61. .ot-letter-left {
  62.         background: #e74d3c;
  63. }

  64. .ot-letter-left span {
  65.         text-shadow:
  66.                 1px 4px 6px #e74d3c,
  67.                 0 0 0 hsla(0, 0%, 0%, 0.3),
  68.                 1px 4px 6px #e74d3c;
  69. }

  70. .ot-letter-left span:after {
  71.         color: #e74d3c;
  72. }

  73. .ot-letter-left:hover span:after {
  74.         color: #ea6253;
  75. }
  76. .ot-letter-bottom span:before,
  77. .ot-letter-bottom span:after {
  78.         transform-origin: 50% 0;
  79. }

  80. .ot-letter-bottom span:before {
  81.         transform: scale(1,1.05) skew(4deg,0deg);
  82. }

  83. .ot-letter-bottom span:after {
  84.         text-shadow:
  85.                 0px -1px 0px hsla(360, 100%, 100%, 0.1),
  86.                 0px 3px 1px hsla(0, 0%, 0%, 0.4);
  87.         transform: rotateX(15deg);
  88. }

  89. .ot-letter-bottom:hover span:before {
  90.         transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
  91. }

  92. .ot-letter-bottom:hover span:after {
  93.         transform: translateY(0.045em) rotateX(40deg);
  94. }
复制代码
via:http://www.j--d.com/html/187.html

标签: csstransform