CSS3 transforms 3D翻开

    • 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>
时间： 2024-10-26 00:58:45

CSS3 transforms 3D翻开的相关文章

纯css3 transforms 3D文字翻开翻转3D开放式效果

详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class="grid"> <li class="ot-letter-left"><span data-letter="C">C</span></li> <li class="ot-letter-

使用CSS3实现3D图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像.若浏览器不支持3D变换,一个简单的滑块将作为后备方案.要调用这个插件,首先把图片放在无序列表中

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg

CSS3 Transforms、Transitions和Animation属性总结

css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform.transition和animation,通过使用这三个属性可以达到很炫酷的效果.需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性. Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属

CSS3 《3D骰子 压大小》

游戏在线预览地址:http://dtdxrk.github.io/game/3d-dice/index.html js判断一个随机数大小的游戏. 本来想用canvas做的,平面的生产一个点数,感觉没啥意思. 结合CSS3来吧,正好温习一下css3的3d属性. CSS具体实现过程[CSS3练习]3D盒子制作

基于CSS3的3D旋转效果

自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文中对3D转换进行了形象.生动.详细的阐述.在这里,只和大家讨论怎么利用3D转换来实现立体及其旋转效果,例如: 好吧,废话不多说,上代码! 1.页面代码 1 <div class="translate3D_test"> 2 <ul class="cube"

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

CSS3的3D转换translate3d(x,y,z)函数

CSS3的3D转换translate3d(x,y,z)函数:translate3d(x,y,z)只是规定3D转换的一种形式,更多相关内容可以参阅CSS3的3D转换效果详解介绍一章节.此函数用来规定指定元素在三维空间中的位移.语法结构: translate3d(x,y,z) 参数解析:1.x:表示在x轴方向的位移.2.y:表示在y轴方向的位移.3.z:表示在z轴方向的位移.代码实例:1.x轴方向的位移: <!DOCTYPE html> <html> <head> <

初步学习css3之3D动画

本人是一名前端菜鸟,在css3如此火爆的时代,今天才来接触这个神秘的东西,第一次接触到的就是使用css3制作3d动画,特来写此文章,高手勿喷. 以下是body部分 <body> <div id="my3d"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="pa