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布局:

  1. <div class="box">
  2. <div class="inner">
  3. <div class="r1">1</div>
  4. <div class="r2">2</div>
  5. </div>
  6. </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(宽度的一半)

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

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

  1. .box {
  2. width: 300px;
  3. height: 300px;
  4. -webkit-perspective:8000px; /*设置舞台:透视和视角*/
  5. position: relative;
  6. }
  7. .inner {
  8. width: 100%;
  9. height: 100%;
  10. -webkit-transform-style:perserve-3d; /*设置场景:3d变换*/
  11.  
  12. }
  13. .inner div{
  14. position: absolute; /*绝对定位:使正面和反面全部重合*/
  15. top:;
  16. left:;
  17. width: 100%;
  18. height: 100%;
  19. border-radius:50%;
  20. text-align: center;
  21. line-height: 300px;
  22. -webkit-backface-visibility:hidden; /*背面隐藏*/
  23. }
  24. .r1 {
  25. background: red;
  26. -webkit-transition:1.5s; /*设置动画*/
  27. }
  28. .r2 {
  29. background: yellow;
  30. -webkit-transform:rotateY(180deg); /*刚开始,背面隐藏*/
  31. -webkit-transition:1.5s;
  32.  
  33. }
  34. .inner:hover .r1{
  35. -webkit-transform:rotateY(180deg); /*翻转后,正面隐藏,反面出现*/
  36.  
  37. }
  38. .inner:hover .r2 {
  39. -webkit-transform:rotateY(0deg);
  40.  
  41. }

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. tabindex属性

    1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...

  2. CodeForces 747D Winter Is Coming

    贪心. 只考虑负数的位置,先填间隔较小的,再填间隔较大的.如果填不满就不填,如果有多余就留给最后一个负数到终点这段路. #include<cstdio> #include<cstri ...

  3. Git学习笔记(一)创建版本库并添加文件

    最近从廖雪峰老师的个人网站上学习git,做点笔记. ★★★★★ 先注册自己的username和email,否则会报如下错误: 注册:git config --global user.name &quo ...

  4. java基础练习 9

    import java.util.Scanner; public class Ninth { /*取一个整数a从右端开始的4-7位.*/ public static void main(String[ ...

  5. [前端性能提升]--图片转化为base64

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...

  6. nohup及/dev/null使用

    1.nohup    ----后台执行,执行记录默认输出到当前目录下的nohup.out文件         nohup find /etc -name passwd 2./dev/null介绍 把/ ...

  7. windows 上搭建 sftp 服务器 --freesshd

    Linux 下 sftp 默认都会安装的, Windows 就没有了.网上搜的资料发现比较好用的是 freesshd,免费版中最好用的. 1,下载:http://www.freesshd.com/?c ...

  8. iOS Size Class使用

    iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了-但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题->各种屏 ...

  9. linux/windows平台生成随机数的不同方法

    linux平台,使用rand.Seed() //rand_linux.go package main import ( "math/rand" "time" ) ...

  10. cshtml一二

    布局页:_MyLayout.cshtml <!DOCTYPE html> @*Razor布局页*@ <html> <head> @*HTTP的头部协议,提示浏览器网 ...