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. 第一百三十节,JavaScript,封装库--连缀

    JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...

  2. libguestfs-tools 虚拟机磁盘管理工具

    libguestfs-tools虚拟机磁盘管理工具: 官网:http://libguestfs.org/ 这是一个非常强大的虚拟机磁盘管理工具,该工具包内包含的工具有virt-cat.virt-df. ...

  3. Amdahl's Law

    Amdahl's Law 程序可能的加速比取决于可以被并行化的部分. 如果没有可以被并行化的部分,则P=0,speedup=1,no speedup. 如果全部可以被并行化,P=1,speedup i ...

  4. Front-End(一)

    前端初识 现在网站开发的市场越来越大,个人和企业都有了主页.网络办公的需求,并且随着网站开发前端和后台的工作细分,前端开发的需求也越来越大. 前端的任务是将美工的网页设计使用前端技术尽可能无差别地实现 ...

  5. mysql 查看数据库中所有表的记录数

    use information_schema; SELECT DISTINCT t.table_name, t.engine '表引擎', t.table_rowsFROM TABLES tWHERE ...

  6. 两种画线算法(DDA&Bersenham)

    DDA(digital differential analyzer) 由直线的斜截式方程引入 对于正斜率的线段,如果斜率<=1,则以单位x间隔(δx=1)取样,并逐个计算每一个y值 Yk+1 = ...

  7. 相机标定 matlab opencv ROS三种方法标定步骤(2)

    二  ubuntu下Opencv的相机标定 一般直接用Opencv的源码就可以进行相机的标定,但是可能只是会实现结果,却不懂实现的过程,我也是模模糊糊的看了<计算机视觉中的多视图几何>以及 ...

  8. java实现线性表

    /** * 线性表 * @author zyyt * */ public  class LinkList {//框架级别的大师级 private int size;//链表的实际大小 private ...

  9. JSON中JObject和JArray,JValue序列化(Linq)

    http://blog.csdn.net/lovegonghui/article/details/50293629 一.JObject和JArray序列化 1.实例化JArray和JObject,然后 ...

  10. Python基础(十一)-面向对象

    三种编程范式: 1.函数式编程:函数指数学意义上的函数 由于命令式编程语言也可以通过类似函数指针的方式来实现高阶函数,函数式的最主要的好处主要是不可变性带来的.没有可变的状态,函数就是引用透明(Ref ...