1、在IE下无法显示翻转效果,火狐和谷歌可以

 /*样式css*/

 .nav-menu  li {
display: inline;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 40px;
font-size: 20px;
width:200px;
height: 50px;
perspective: 2000px;
}
.three-d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
-ms-transition: all .07s linear;
-o-transition: all .07s linear;
transition:all .7s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
.three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box {
-wekbit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-ms-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.content{
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.content-hover{
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-ms-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.content{
width:200px;
height: 50px;
border:1px solid #10adf2;
color:#059dd9;
font-size: 30px;
cursor: pointer;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
line-height: 50px;
}
.content-hover {
width:200px;
height: 50px;
padding:0 10px;
color:#059dd9;
font-size: 30px;
cursor: pointer;
position: absolute;
top: 0px;
left: 0;
background: #10adf2;
color: white;
pointer-events: none;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
line-height: 50px;
}
.hidden{
display: none;
} /*html*/ <ul class="nav-menu">
<li><a href="#" class="three-d">
<div class="hidden">3D</div>
<span class="three-d-box">
<div class="content">
3D翻转
</div>
<div class="content-hover">
3D立体翻转
</div>
</span>
</a>
</li>
</ul>

2、在火狐、谷歌和IE11在均测试过可以

 /*样式css*/
.content-1{
width:200px;
height: 50px;
color:transparent;
font-size: 30px;
cursor: pointer;
text-align: center;
line-height: 50px;
margin:50px 0 0 0;
position: relative;
}
.content-1:before{
content:"3D翻转";
-webkit-font-smoothing:antialiased;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
display: block;
color: #059dd9;
line-height: 50px;
border:1px solid #10adf2;
-webkit-transform-origin:50% 50% -25px;
transform-origin:50% 50% -25px;
-ms-transform-origin:50% 50% -25px;
transition:0.3s;
}
.content-1:after{
content:"3D立体翻转";
-webkit-font-smoothing:antialiased;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
color:white;
line-height: 50px;
background: #10adf2;
-webkit-transform-origin:50% 50% -25px;
transform-origin:50% 50% -25px;
-ms-transform-origin:50% 50% -25px;
transition:0.3s;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
}
.content-1:hover:before{
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
}
.content-1:hover:after{
-webkit-transform:rotateX(0);
transform:rotateX(0);
-ms-transform:rotateX(0);
} /*html*/ <div class="content-1">
3D翻转
</div>

css3实现3D立体翻转效果的更多相关文章

  1. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  2. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  3. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

  4. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

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

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

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

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  7. CSS3+HTML5特效2 - 翻转效果

    先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...

  8. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  9. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

随机推荐

  1. CocosStudio文件解析工具CsdAnalysis

    起因 因为工作需要,所以需要使用CocosStudio来制作界面动画什么的.做完了发现需要找里边对象的时候会有很长一串代码,感觉不是很爽.之前写OC代码的时候可以吧程序中的对象指针跟编辑器中的对象相对 ...

  2. WinForm 代码实现以管理员身份运行

    [STAThread] static void Main(string[] Args) { //获得当前登录的Windows用户标示 System.Security.Principal.Windows ...

  3. C#不对称加密

    对称加密的缺点是双方使用相同的密钥和IV进行加密.解密.由于接收方必须知道密钥和IV才能解密数据,因此发送方需要先将密钥和IV传递给接收方.这就 有一个问题,如果攻击者截获了密钥和IV,也就等于知道了 ...

  4. 如何实现在PHP中调用JAVA

    详细说明:http://php.662p.com/thread-275-1-1.html PHP与JAVA JAVA是个非常强大的编程利器,它的扩展库也是非常的有用,这篇教程,主要讲述怎样使用PHP调 ...

  5. 基于Netbeans的PHPUnit单元测试环境搭建

    一.配置 PHPUnit截至2015-10-16,稳定版已更新至5.0.6,要求使用PHP v5.6及以上的环境才能使用. PHPUnit的4.8系列要求在PHP v5.3.3以上环境使用. Netb ...

  6. Maven命令行使用:mvn clean compile(编译)

    先把命令行切换到Maven项目的根目录,比如:/d/xxxwork/java/maven-test,然后执行命令: mvn clean compile 执行结果如下: [INFO] Scanning ...

  7. 在 Visual Studio 等编辑器/IDE中自动切换输入法,不需要手动的有没有?

    使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...

  8. 装配bean

    spring有三种装配bean的方式:隐式装配.java代码装配.xml装配 隐式装配最为省事方便,也称为自动化装配 这三种装配方式可以混搭着来用 在这里通过一个例子来讲述配置 CD的两个实现,一个是 ...

  9. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  10. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...