• 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. [CareerCup] 4.6 Find Next Node in a BST 寻找二叉搜索树中下一个节点

    4.6 Write an algorithm to find the'next'node (i.e., in-order successor) of a given node in a binary ...

  2. Android requires compiler compliance level 5.0 or 6.0. Found '1.7' instead. Please use Android Tool

    重装操作系统后,要重新配置Android开发环境.配置成功后,添加原本项目时却出现了错误! Android requires compiler compliance level 5.0 or 6.0. ...

  3. android的adb详解（多设备时adb调用）

    在多设备(模拟器)时,想要直接用logcat查看其中一台的状态,或者直接把应用安装到目标设备上时,需要指定设备号.adb devices这个指令可以得到当前设备的序列号(serialNumber).比 ...

  4. 恢复windows 的快捷方式打开方法，亲测1-7恢复，

    相信有些用户曾试过错误地把LNK文件的打开方式更改其他文件,导致系统所有的快捷方式都失效.在vista与Windows7系统还不普遍使用的时候,相信大家会有点惊慌失措,不要紧,下面只要大家进行如下操作 ...

  5. hugo-最好用的静态网站生成器

    hugo最好用的静态网站生成器 Hugo是由Go语言实现的静态网站生成器.简单.易用.高效.易扩展.快速部署. 快速开始 安装Hugo 1. 二进制安装(推荐:简单.快速) 到 Hugo Releas ...

  6. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  7. powerdesigner 绘制表关系和导出sql

    1.生成图(A图,B图) 2.创建关系(palette工具栏里有个线条,主表子表关系连接即可,拖动是由顺序的,一对多即从A表往B表连接) 3.这里小说一下   一开始是CDM模式,可以在软件最顶层看到 ...

  8. 回顾一年的IT学习历程与大学生活

    今天是2015年8月27日,距离成为大三狗还有一个多星期,在这个不算繁忙的暑假的下午来总结一下这一年来,在IT方面的学习. 一.入门(2014.3) 我大一的专业是信息工程,信息工程听上去就是信息(I ...

  9. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  10. 每天一个linux命令（29）：date命令

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1．命令格式: date [参数 ...