• 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. 详解SpringMVC中Controller的方法中参数的工作原理[附带源码分析]

    目录 前言 现象 源码分析 HandlerMethodArgumentResolver与HandlerMethodReturnValueHandler接口介绍 HandlerMethodArgumen ...

  2. 谈谈iOS9中的WebKit 与 Safari

    每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同 ...

  3. cocos2d-x 3.0以上版本字体设置问题

    cocos2d-x中的万年大坑,字体总算是有比较好的结局办法了.之前都是CCLabelTTF,CCLabelBMFont,CCLabelAtlas什么的,我只想说一句:好难用!毕竟是做游戏,那么难看的 ...

  4. node的实践（项目三）

    渲染前台的方式. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  5. angular的splitter案例学习

    angular的splitter案例学习,都有注释了,作为自己的备忘. <!DOCTYPE html> <html ng-app="APP"> <he ...

  6. 0505-NABCD模型、视频

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 NABCD模型: ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. new-nav-html

    <header id="masthead" class="masthead" role="banner"> <h1 cla ...

  9. android 6.0 SDK中删除HttpClient的相关类的解决方法

    一.出现的情况 在eclipse或 android studio开发, 设置android SDK的编译版本为23时,且使用了httpClient相关类的库项目:如android-async-http ...

  10. 解决：Angular-cli:执行ng-build --prod后，dist文件里无js文件、文件未压缩等问题

    Angular2.0于2016年9月上线,我于9月入坑. 入坑以来,一直让我很困惑的问题 1.angular-cli是个什么鬼东西? 2.为什么我们自己的资源文件还没写什么,就有起码50多个js文件加 ...