css3图片与文字3D transform切换:

  http://www.w3cplus.com/demo/419.html

详细的CSS3属性详解:

  http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

总结如下:

1、需要使用到的CSS3属性

    透视和视角:perspective:8000px;  -------------放在舞台上(.box)

    需要用到transform的3D变换,即:transform-style:preserve-3d;-------------------------放在容器上(.inner)

    translateZ,Z坐标移动,这个需要与perspective搭配使用,transform:translateZ(150px) 里面的数值为舞台高度的一半

    rotateX,X方向旋转----------------------刚开始去.r2进行旋转-90度使其看不见,rotate(-90deg)

html布局:

    <div class="box">
<div class="inner">
<div class="r1">1</div>
<div class="r2">2</div>
</div>
</div>

CSS:

  /*舞台*/
    .box {
      width: 500px;
      height: 300px;
      position: relative;
      -webkit-perspective:8000px;   //透视和视角
      }
  /*容器*/
    .inner {
      width: 100%;
      height: 100%;
      -webkit-transform-style:preserve-3d;    //3d变换
      transition:.6s;
    }
  /*内容*/
    .r1 {
      position: absolute;
      width: 100%;
      height: 100%;
      background: red;
      outline:5px solid #000;
      -webkit-transform:translateZ(150px);    // 里面的数值 = 舞台高度的一半
    }
    .r2 {
      position: absolute;
      width: 100%;
      height: 100%;
      background: yellow;
      outline: 5px solid blue;
      -webkit-transform:rotateX(-90deg) translateZ(150px);  //里面的数值 = 舞台高度的一半,刚开始通过rotateX(-90deg)隐藏在下方
    }

  /*交互*/

    .inner:hover {
      -webkit-transform: rotateX(90deg);   //让r2出现
    }

如果需要左右翻转,只需要更改rotateX为rotateY,translateZ(宽度的一半)

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

另一种翻转效果,结构不变,样式如下:

        .box {
width: 300px;
height: 300px;
-webkit-perspective:8000px; /*设置舞台:透视和视角*/
position: relative;
}
.inner {
width: 100%;
height: 100%;
-webkit-transform-style:perserve-3d; /*设置场景:3d变换*/ }
.inner div{
position: absolute; /*绝对定位:使正面和反面全部重合*/
top:;
left:;
width: 100%;
height: 100%;
border-radius:50%;
text-align: center;
line-height: 300px;
-webkit-backface-visibility:hidden; /*背面隐藏*/
}
.r1 {
background: red;
-webkit-transition:1.5s; /*设置动画*/
}
.r2 {
background: yellow;
-webkit-transform:rotateY(180deg); /*刚开始,背面隐藏*/
-webkit-transition:1.5s; }
.inner:hover .r1{
-webkit-transform:rotateY(180deg); /*翻转后,正面隐藏,反面出现*/ }
.inner:hover .r2 {
-webkit-transform:rotateY(0deg); }

http://jsbin.com/muxal/2/edit

原理:

  1、设置舞台和场景

  2、使用绝对定位使正面和反面的div重合,让正面和反面的背面都隐藏,即:backface-visibility:hidden

  3、让反面的旋转180deg先隐藏掉,当hover时,正面隐藏(旋转180deg),反面出现(旋转到0)

CSS3的翻转效果的更多相关文章

  1. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

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

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

  3. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  4. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  5. flip 翻转效果 css3实现

    1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  6. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  7. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  8. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...

  9. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

随机推荐

  1. trie树模板(统计难题)

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  2. Python自动化开发-基础语法

    1.编码 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.解决思路:数字与符号建立一对一映射,用不同数字表示不同符号. ASCII(American Standard Code ...

  3. 汇农PC个人中心总结

    1. 技巧总结 1. 使用 padding 编写灵活的 登录 | 注册, '|' 竖线, 参考: http://www.imooc.com/learn/710 font-size: 0; border ...

  4. Redux超酷的开发工具Redux-Devtools

    超酷的开发工具 Redux-devtools redux-devtools是一个有趣而又高效的redux开发工具,如果你想直接在github上查看相关的内容,请前往这里.事实上,也鼓励大家养成在git ...

  5. yarn计算一个节点容量及其配置项

    mapred-site.xml mapreduce.map.memory.mb 1536 每个Map Container的大小 mapreduce.reduce.memory.mb 2560 每个Re ...

  6. SQL sever 创建定时执行任务

    在SQL的使用过程中,我们经常要做些数据备份以及定时执行的任务. 这些任务能够帮助我们简化工作过程. 下面我们了解下如何创建一个定时执行的存储过程. 首先我们要打开 SQL server 代理服务 选 ...

  7. C# 语言规范_版本5.0 (第19章 附录A_文档注释)

    A. 文档注释 C# 提供一种机制,使程序员可以使用含有 XML 文本的特殊注释语法为他们的代码编写文档.在源代码文件中,可以使用特定形式的注释来指导工具从这些注释及其后的源代码元素生成 XML.使用 ...

  8. json的细节

    之前一直纳闷为什么在js里直接写的json数据可以不用eval()直接解析,而后台传入ajax的json数据需要eval()一下才能解析 原来是我没搞清楚json格式字符串跟json对象 var te ...

  9. Minicom配置及使用详解

    因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB*. minicom,tkterm都是linux下应用比 ...

  10. AForge.net 使用之录像拍照功能实现

    连接摄像头设备,这里需要引入 AForge.Video; AForge.Video.DirectShow; AForge.Video.FFMPEG; 还需要添加引用,aforge.dll,aforge ...