• 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. 1.1Linux 系统简介（学习过程）

    =====课程笔记===== 一.Linux 为何物 Linux 是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS . Linux 也就是系统调用和内核两层,我们使 ...

  2. warning: LF will be replaced by CRLF

    一. Git提供了一个换行符检查功能(core.safecrlf),可以在提交时检查文件是否混用了不同风格的换行符.这个功能的选项如下: false - 不做任何检查warn - 在提交时检查并警告t ...

  3. IT应届生如何准备找工作？

    今天和一个弟弟吃饭,他明年年初即将计算机研究生毕业.谈论到怎么找工作,觉得自己会的不多,心里非常发虚.虽然我当年找工作也走了很多弯路,思路并不是很清晰.但是工作了这么多年,对企业需要什么样子的人还是有 ...

  4. 利用mstsc远程桌面传送文件，记录一下

    尼玛之前服务器上传有点异常,在服务器装了一个上传下载监控的软件,用的是什么 绿色版QQ流量监控,绿色是挺绿色的,装了就等哭吧.没时间打字反正就是删除不了,后来想办法删除了.艹.所有服务除了系统服务能上 ...

  5. 百度地图ip定位，不算bug的bug

    做为一个入行不足两年的菜鸟,能在博客园写下第一篇博客,是需要多大的勇气啊.主要还是怕大神们喷啊.其次自己文笔实在太差了. 哈哈~还请各位大神,口下留情啊. 首先说下我的需求:一个需要城市分站的手机站. ...

  6. js方式清空表单数据的两种方式

    方法1:遍历页面元素 /* 清空FORM表单内容  id:表单ID*/  function ClearForm(id) {     var objId = document.getElementByI ...

  7. dp式子100个……

    1.        资源问题1-----机器分配问题F[I,j]:=max(f[i-1,k]+w[i,j-k]) 2.        资源问题2------01背包问题F[I,j]:=max(f[i- ...

  8. [Json.net]Linq to Json

    引言 上篇学习了json.net的基本知识,这篇学习linq to json. 上篇文章:[Json.net]快速入门 Linq to Json Linq to Json是用来快速操作json对象的, ...

  9. iBATIS sqlMapConfig配置详解

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMapConfig PUBLIC & ...

  10. tomcat 配置

    tomcat 安装完成之后,我们可以在器目录先看到有如下结构