css3实现3D立体翻转效果
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立体翻转效果的更多相关文章
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- CSS3实现3d菜单翻转
transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...
- css3实现酷炫的3D盒子翻转效果
简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
- CSS3+HTML5特效2 - 翻转效果
先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
随机推荐
- CocosStudio文件解析工具CsdAnalysis
起因 因为工作需要,所以需要使用CocosStudio来制作界面动画什么的.做完了发现需要找里边对象的时候会有很长一串代码,感觉不是很爽.之前写OC代码的时候可以吧程序中的对象指针跟编辑器中的对象相对 ...
- WinForm 代码实现以管理员身份运行
[STAThread] static void Main(string[] Args) { //获得当前登录的Windows用户标示 System.Security.Principal.Windows ...
- C#不对称加密
对称加密的缺点是双方使用相同的密钥和IV进行加密.解密.由于接收方必须知道密钥和IV才能解密数据,因此发送方需要先将密钥和IV传递给接收方.这就 有一个问题,如果攻击者截获了密钥和IV,也就等于知道了 ...
- 如何实现在PHP中调用JAVA
详细说明:http://php.662p.com/thread-275-1-1.html PHP与JAVA JAVA是个非常强大的编程利器,它的扩展库也是非常的有用,这篇教程,主要讲述怎样使用PHP调 ...
- 基于Netbeans的PHPUnit单元测试环境搭建
一.配置 PHPUnit截至2015-10-16,稳定版已更新至5.0.6,要求使用PHP v5.6及以上的环境才能使用. PHPUnit的4.8系列要求在PHP v5.3.3以上环境使用. Netb ...
- Maven命令行使用:mvn clean compile(编译)
先把命令行切换到Maven项目的根目录,比如:/d/xxxwork/java/maven-test,然后执行命令: mvn clean compile 执行结果如下: [INFO] Scanning ...
- 在 Visual Studio 等编辑器/IDE中自动切换输入法,不需要手动的有没有?
使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...
- 装配bean
spring有三种装配bean的方式:隐式装配.java代码装配.xml装配 隐式装配最为省事方便,也称为自动化装配 这三种装配方式可以混搭着来用 在这里通过一个例子来讲述配置 CD的两个实现,一个是 ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...