父元素要添加属性transform-style:preserve-3d;和transform:perspective(800px);还有相对定位
首先设置子元素 具有3D属性,然后再设置视角与3D元素的距离,拉开视角才可以看到3D效果!以像素计;;相对定位是为了给子元素绝对定位一个标点;

以立方体为例,(其实我只会立方体。。。)

子元素便是立方体的各个面了,6个div 便是6个面,然后绝对定位,脱离文档流,并使各自的原点重合,方便调整;










:


此处省略一万字

重点是 按照图形最终呈现的结果去思考旋转和位移的顺序,这个很重要,旋转后 坐标轴发生变化,坐标轴的方向也跟着旋转

估计是这个只有我可以看懂了吧。。。。希望自己一年后再来看,自己还能看懂

关于transform-style:preserve-3d的些许明了的更多相关文章

  1. twisted高并发库transport函数处理数据包的些许问题

    还是在学校时间比较多, 能够把时间更多的花在学习上, 尽管工作对人的提升更大, 但是总是没什么时间学习, 而且工作的气氛总是很紧凑, 忙碌, 少了些许激情吧.适应就好了.延续着之前对twisted高并 ...

  2. CSS Transform Style

    As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...

  3. 用python参加Kaggle的些许经验总结(收藏)

    Step1: Exploratory Data Analysis EDA,也就是对数据进行探索性的分析,一般就用到pandas和matplotlib就够了.EDA一般包括: 每个feature的意义, ...

  4. 多线程的些许理解(平台x86,具体考虑linux,windows)

    多线程的些许理解 一.体系架构 1.原子操作 1) 定义 不可中断的一个或者一系列操作,也就是不会被线程调度机制打断的操作,在运行期间不会有任何的上下文切换(context switch). 2) 我 ...

  5. Android CodeReview 些许总结

    CodeReview些许总结 1:使用Handler的时候,使用handler.post(Runnable);,hanler与类尽量保持弱引用关系,或者使用静态的handler对象 public Ha ...

  6. iOS安全些许经验和学习笔记

    http://bbs.pediy.com/showthread.php?t=209014 标题: [原创]iOS安全些许经验和学习笔记作者: MonkeyKey时间: 2016-03-30,16:32 ...

  7. CSS3 transform变形(3D转换)

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  8. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  9. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

随机推荐

  1. linux软连接(转)

    这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接,类似Windows下的超级链接. 这个命令最常用的参数是-s,具体用法是:sudo l ...

  2. BOS物流项目第十一天(补充)

    上节课我们在添加权限时,把选择父功能点做成这种效果,不太好,我们进行升级优化. 1.我们对jsp页面进行修改,主要是改了样式. 2.重新编写我们dao层的代码 3.在我们查看父项的时候自动查找子项,我 ...

  3. 2018面向对象程序设计(Java)第15周学习指导及要求

    2018面向对象程序设计(Java)第15周学习指导及要求 (2018.12.6-2018.12.9)   学习目标 (1) 掌握Java应用程序打包操作: (2) 了解应用程序存储配置信息的两种方法 ...

  4. C++字符串和向量

    陷阱:C字符串使用=和== char a_string[10]; a_string="Hello"  非法 strcpy(a_string,"Hello");  ...

  5. The APK failed to install. Error:Could not parse error string.

    问题一: The APK failed to install. Error:Could not parse error string. 今天拖拽自己的apk到模拟器上运行,报上述错误. 搜索解决方案. ...

  6. 10.18号java课后动手动脑

    问题一结论:类如果提供了一个自定义的构造方法,将导致系统不再提供默认构造方法. 问题二结论:(1)程序运行的结果是100和300,field=200为类的初始化块,可以在类中使用“{”和“}”将语句包 ...

  7. pinyin4j 中文转拼音

  8. 【翻译】View Frustum Culling --2 Geometric Approach – Extracting the Planes

    在上一篇中,我们知道了视锥体的形状,并且也确定了我们进行裁剪时的步骤.那我们接下来要走的就是确定视锥体的六个平面: near, far, top, bottom, left and right 2.计 ...

  9. GreenDao-自定义SQL查询-拼接多个查询条件-AndroidStudio

    //获取本地Pad(离线工作票列表) public static List<WTDetailTableBean> getPadWTList(String token, String use ...

  10. mysql数据库解决中文乱码的问题

    http://jingyan.baidu.com/article/647f0115937be97f2148a894.html 一个一劳永逸的方法, 修改mysql的配置文件my.ini 在这个配置文件 ...