• R
    • T
    • L
    • B
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css3 transforms 3D文字翻开</title>

</head>

<body>

<div class="component">

  <ul class="grid">

    <li class="ot-letter-left"><span data-letter="R">R</span></li>

    <li class="ot-letter-top"><span data-letter="T">T</span></li>

    <li class="ot-letter-right"><span data-letter="L">L</span></li>

    <li class="ot-letter-bottom"><span data-letter="B">B</span></li>

  </ul>

</div>

<style>

ul,li{ list-style:none;}.grid {

    list-style: outside none none;

    margin: 0;

    padding: 0;

    position: relative;

    width: 100%;

}

.grid li {

    float: left;

    font-size: 12em;

    line-height: 1.5;

    max-height: 290px;

    position: relative;

    text-align: center;

    width: calc(100% / 6);

}

.grid li span {

    color: hsla(0, 0%, 0%, 0.6);

    display: inline-block;

    font-weight: 900;

    line-height: 1;

    perspective: 550px;

    position: relative;

    transform-style: preserve-3d;

    z-index: 1;

}

.grid li span::before, .grid li span::after {

    bottom: 0;

    content: attr(data-letter);

    left: 0;

    line-height: inherit;

    position: absolute;

    right: 0;

    top: 0;

    transition: all 0.3s ease 0s;

    z-index: 2;

}

.grid li span::before {

    color: hsla(0, 0%, 0%, 0.12);

    text-shadow: none;

}

.ot-letter-left {

    background: none repeat scroll 0 0 #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-right {

    background: none repeat scroll 0 0 #ea6657;

}

.ot-letter-right span {

    text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657;

}

.ot-letter-right span::after {

    color: #ea6657;

}

.ot-letter-right:hover span::after {

    color: #ed7a6e;

}

.ot-letter-top {

    background: none repeat scroll 0 0 #ee7f72;

}

.ot-letter-top span {

    text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72;

}

.ot-letter-top span::after {

    color: #ee7f72;

}

.ot-letter-top:hover span::after {

    color: #f09389;

}

.ot-letter-bottom {

    background: none repeat scroll 0 0 #e95949;

}

.ot-letter-bottom span {

    text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949;

}

.ot-letter-bottom span::after {

    color: #e95949;

}

.ot-letter-bottom:hover span::after {

    color: #eb6e60;

}

.ot-letter-left span::before, .ot-letter-left span::after {

    transform-origin: 0 50% 0;

}

.ot-letter-left span::before {

    transform: scale(1.08, 1) skew(0deg, 1deg);

}

.ot-letter-left span::after {

    text-shadow: -1px 0 0 hsla(0, 100%, 100%, 0.1), 3px 0 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-right span::before, .ot-letter-right span::after {

    transform-origin: 100% 50% 0;

}

.ot-letter-right span::before {

    transform: scale(0.85, 1) skew(0deg, 1deg);

}

.ot-letter-right span::after {

    text-shadow: 1px 0 0 hsla(0, 100%, 100%, 0.1), -3px 0 1px hsla(0, 0%, 0%, 0.4);

    transform: rotateY(15deg);

}

.ot-letter-right:hover span::before {

    transform: scale(0.85, 1) skew(0deg, -20deg);

}

.ot-letter-right:hover span::after {

    transform: rotateY(40deg);

}

.ot-letter-top span::before, .ot-letter-top span::after {

    transform-origin: 50% 100% 0;

}

.ot-letter-top span::before {

    transform: scale(1, 0.95) skew(-4deg, 0deg);

}

.ot-letter-top span::after {

    text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.1), 0 -3px 1px hsla(0, 0%, 0%, 0.4);

    transform: rotateX(-15deg);

}

.ot-letter-top:hover span::before {

    transform: translateY(-0.05em) scale(1, 0.55) skew(-10deg, 0deg);

}

.ot-letter-top:hover span::after {

    transform: translateY(-0.035em) rotateX(-40deg);

}

.ot-letter-bottom span::before, .ot-letter-bottom span::after {

    transform-origin: 50% 0 0;

}

.ot-letter-bottom span::before {

    transform: scale(1, 1.05) skew(4deg, 0deg);

}

.ot-letter-bottom span::after {

    text-shadow: 0 -1px 0 hsla(0, 100%, 100%, 0.1), 0 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);

}

</style>

</body>

</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. linux实践——ELF分析

    一.ELF的部分结构定义 elf header(定义在/usr/include/elf.h)//64位的系统ELF文件头包括以下两个部分 #define EI_NIDENT (16) typedef ...

  2. Spring 集成 Hibernate 和 Struts 2

    在Spring中集成Hibernate,实际上就是将Hibernate中用到的数据源DataSource. SessionFactory实例(通常使用Hibernate访问数据库时,应用程序会先创建S ...

  3. Sublime Text 之运行 ES6 (基于babel)

    本文同步自我的个人博客:http://www.52cik.com/2015/10/21/sublime-text-run-es6.html 之前在博客园里写过一篇<Sublime Text 之运 ...

  4. 第二章 Js函数

      函数的定义二种定义 ①function myfunc () { console("hello"); }; ②var myfunc = function () { console ...

  5. JavaScript基础---语言基础（3）

    流程控制语句 学习要点: 1.switch语句 2.for...in语句 3.break和continue语句 4.with语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript ...

  6. Linq表达式开窍

    static IQueryable<T> GetPageList<T,TKey>(Expression<Func<T,bool>> whereLambd ...

  7. Spring security 学习 （自助者，天助之！）

    自己努力,何必要强颜欢笑的求助别人呢?  手心向下不求人! Spring security学习有进展哦: 哈哈! 1.页面都是动态生产的吧! 2.设置权限:  a:pom.xml配置jar包 b:cr ...

  8. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

  9. [转]Oracle中的索引详解

    原文地址:http://www.oschina.net/question/30362_4057 一. ROWID的概念 存储了row在数据文件中的具体位置:64位 编码的数据,A-Z, a-z, 0- ...

  10. 图解Android - Looper, Handler 和 MessageQueue

    Looper, Handler 和 MessageQueue 是Android 的异步消息处理机制