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


在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。 在线预览 立即下载AnimatedOpeningType.zip htm...
在本教程中,将基于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,
标签: csstransform

更多 css 相关资讯

CSS 3中弹性盒布局的最新版

CSS 3中弹性盒布局的最新版

 CSS 3中弹性盒布局的最新版概述   在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。   虽然可以使用其他CSS样

10 个轻松学会 CSS3 的优秀在线资源

10 个轻松学会 CSS3 的优秀在线资源

本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web

10条影响CSS渲染速度的写法与建议

1、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把

你未必知道的CSS小知识:text-decoration属性变成了属性简写

你未必知道的CSS小知识:text-decoration属性变成了属性简写

我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; }复制代码text-decoration

使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: <a href="#null">极客标签</a>复制代码 CSS代码

8款超酷实用的CSS3 Tab菜单集合

8款超酷实用的CSS3 Tab菜单集合

在网页应用中,有一种既方便用户浏览又节省空间的应用就是Tab菜单了,今天我们精选了一些基于CSS3的Tab菜单,效果很酷,而且比较实用。 1、CSS3华丽的Tab菜单 带小图标动画

CSS FILTERS:CSS过滤器能够做什么?

CSS FILTERS:CSS过滤器能够做什么?

CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使

使用CSS制作APPLE WATCH刻度盘动画效果

使用CSS制作APPLE WATCH刻度盘动画效果

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。查看演

Web开发中20个很有用的CSS库

Web开发中20个很有用的CSS库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样

视频教程:CSS3动画属性实用技巧教程

视频教程:CSS3动画属性实用技巧教程

目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加

更多 transform 相关资讯

使用CSS制作APPLE WATCH刻度盘动画效果

使用CSS制作APPLE WATCH刻度盘动画效果

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。查看演

9种CSS3炫酷图片预览展示动画特效

9种CSS3炫酷图片预览展示动画特效

这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。 在线演示

20种炫酷CSS3按钮样式和鼠标滑过特效

20种炫酷CSS3按钮样式和鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信

一款非常棒的纯CSS3 3D菜单演示及制作教程

一款非常棒的纯CSS3 3D菜单演示及制作教程

这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面

超可爱 纯CSS3实现的小猪、小老鼠、小牛

利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享

效果非常酷!纯CSS3实现的图片滑块程序

效果非常酷!纯CSS3实现的图片滑块程序

之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得

创意无限:纯CSS打造各种形状钻石

网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇

纯CSS实现3D图像轮转

今天看一个纯css实现的3D图像轮转效果,大家可以点击查看效果研究, 也可以先下载收藏。 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图像,每

纯 CSS 绘制各种图形

纯 CSS 绘制各种图形

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更

纯 CSS 绘制图形(心形、六边形等)

纯 CSS 绘制图形(心形、六边形等)

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,