• 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. 20145215《Java程序设计》课程总结

    20145215<Java程序设计>课程总结 每周读书笔记链接汇总 20145215<Java程序设计>第一周学习总结 20145215<Java程序设计>第二周学 ...

  2. iOS 自定义控件开发（上）

    工作需要,最近在进行iOS方面的图表工作.找了很多第三方库都无法实现效果,所以决定自己写一个控件. <iOS 自定义控件开发(上)> <iOS 自定义控件开发(中)> #0 目 ...

  3. CodeIgniter框架中关于URL（index.php）的那些事

    最近,在做自己的个人网站时,采用了轻量级的php框架CodeIgniter.乍一看上去,代码清晰简洁,MVC模型非常容易维护.开发时我采用的工具是Netbeans IDE 8.0,当然,本文的内容和开 ...

  4. 编译到底做了什么（***.c -> ***.o的过程）

     (第一次写博客,好激动的说.......)   我们知道,一个程序由源代码到可执行文件往往由这几步构成: 预处理(Prepressing)-> 编译(Compilation)-> 汇编( ...

  5. 【Lucene实验1】构建索引

    一.实验名称:构建索引 二.实验日期:2013/9/21 三.实验目的: 1)        能理解Lucene中的Document-Field结构的数据建模过程: 2)        能编针对特定数 ...

  6. “耐撕”团队第一次讨论——“抢答器”需求分析

    团队名称:"耐撕" 团队成员:齐嘉亮.刘伟硕.濮成林.郑蕊 项目名称:"抢答器"(有待改善) 第一次讨论 时间:20160316 地点:软件所 人员:全体 内容 ...

  7. “耐撕”团队 2016.04.06 站立会议

    1. 时间:20:00--20:20 共计20分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http ...

  8. Code Hunters: Hello, world!

    大家好!我们是来自MSRA联合培养班的Code Hunters小组,在未来三个月时间里我们将与殷秋丰老师一起学习高级软件工程这门课. 我们小组共有五名分别来自享誉海内外的中国科学技术大学和北京航空航天 ...

  9. poj3522 kruskal+枚举

    题目的意思是求构成生成树的边的最大边和最小边的差最小.枚举即可 #include<stdio.h> #include<string.h> #include<algorit ...

  10. 最大ASCII的和问题

    问题:One day when you are going to clear all your browsing history, you come up with an idea: You want ...