一、包裹层添加

  -webkit-perspective: 800px;

  -moz-perspective: 800px;

　使子元素获得3D效果支持

 

二、自持子元素需支持3D效果

-webkit-transform-style: preserve-3d;

-webkit-transition: all 0.6s;

-moz-transform-style: preserve-3d;

-moz-transition: all 0.6s;

/*当元素不面向屏幕时隐藏*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;

三、子元素添加3d效果

-webkit-transform:rotateY(0deg);

  -moz-transform:rotateY(0deg);

　　

css3d旋转的更多相关文章

  1. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  2. CSS3D动画制作一个3d旋转的筛子

    希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D) 首先给一个3d的解剖图,x/y/z轴线轴线已经标出 下面附上添加特效的动画旋转 可以根据demo并参考上面解剖图进行理解 < ...

  3. CSS3D效果

    效果如本博客中右边呢个浅色框框,来自webpack首页(IE绕路0_0) github地址:http://wjf444128852.github.io/demo02/css3/css3d/ 思路: 1 ...

  4. 利用CSS3D效果制作简易旋转木马效果

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...

  5. Three.js 学习笔记(1)--坐标体系和旋转

    前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library ...

  6. css3D的魅力

    前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下.  在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-or ...

  7. css3D动画

    css3D动画 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transf ...

  8. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  9. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

随机推荐

  1. Spark安装部署（local和standalone模式）

    Spark运行的4中模式: Local Standalone Yarn Mesos 一.安装spark前期准备 1.安装java $ sudo tar -zxvf jdk-7u67-linux-x64 ...

  2. 结构体指针 Pointers to Structures struct Books Book1; struct Books *struct_pointer;

    小结: 1.To access the members of a structure using a pointer to that structure, you must use the → ope ...

  3. [knowledge][bigdata] nosql

    几款主流nosq数据库对比:http://www.cnblogs.com/vajoy/p/5471308.html Redis VS MongoDB:http://www.jianshu.com/p/ ...

  4. [daily][ulimit][coredump] 快速简单粗暴的用coredump调试

    http://www.cnblogs.com/hugetong/p/6898608.html 一个程序挂掉了, 怎么办?  启动coredump 写一个脚本: [root@T185 ~]# cat / ...

  5. HBase 笔记

    参考资料:HBase权威指南 一行由若干列组成,若干列又构成一个列族一个列族的所有列存储在同一个底层的存储文件里,这个文件叫HFile列族的数量有限制:一个列族里列的数量没限制谓词删除:例如允许用户只 ...

  6. 添加图片后xcode报错：resource fork, Finder information, or similar detritus not allowed

    /Users/songximing/Library/Developer/Xcode/DerivedData/Children-cvqgzlzddltkfndhdmzedxbnoxwx/Build/Pr ...

  7. Excel--数据分列功能

    原文:http://www.ittribalwo.com/article/3963.html excel分列功能一:按照固定宽度进行数据拆分 情景: 如下图所示,在日常工作中,我们经常需要根据人员的身 ...

  8. python_flask 注册，登陆，退出思路 ---纯个人观点

    1注册逻辑首先查询数据库用户名 并判断用户是否存在,如不存在就插入数据 并返回响应给前端2前端模板获取注册信息 判断 用户名不能为空及密码不能为空,和密码不一致 拼接注册url 组成get获取对象 响 ...

  9. Java如何连接SQLServer，并实现查询、修改、删除方法

    场景:A:在UI自动化时,删除数据时候,在界面UI提示“该XX已被使用,无法删除”. 这时候我们有需要做数据初始化的操作,需要把历史数据做删除,来确脚本运行的重复执行,和稳定性质. B: 在做新增操作 ...

  10. Webpack 入门（转）

    原文:https://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将 ...