父元素要添加属性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. 217/219. Contains Duplicate /Contains Duplicate II

    原文题目: 217. Contains Duplicate 219. Contains Duplicate II 读题: 217只要找出是否有重复值, 219找出重复值,且要判断两者索引之差是否小于k ...

  2. EF AutoMaper

    Mapper.CreateMap<Source,Dest>(); 该方法已弃用,使用下面这个 Mapper.Initialize(x=>x.CreateMap<Source,D ...

  3. 总是Eqw

    1.投递总是Eqw状态 qstat -j job_ID #Eqw状态的job id qconf -sq all.q |grep host qconf -shgrp @allhosts

  4. 微信小程序开发攻略

    首先,需要明确的一点是,小程序开发就是前端开发的一个小分支. 其次,小程序开发框架是一个精简版的React ,并且开发比较简单 . 第一步 获取AppId 小程序注册入口http://https:// ...

  5. Object.MemberwiseClone

    [Object.MemberwiseClone] Creates a shallow copy of the current Object. protected object MemberwiseCl ...

  6. U3D框架—单例框架

    写程序应遵循的原则:高内聚(内容的聚合),低耦合(功能与功能之间的联系) 代码里尽量不要有冗余:既重复,没有用的代码 using System.Collections; using System.Co ...

  7. 运行VUE的前端项目

    前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package ...

  8. 解题(JuZhengCalculate-矩阵乘法计算量)

    题目描述 矩阵乘法的运算量与矩阵乘法的顺序强相关. 例如: A是一个50×10的矩阵,B是10×20的矩阵,C是20×5的矩阵 计算A*B*C有两种顺序:((AB)C)或者(A(BC)),前者需要计算 ...

  9. Python 多继承与MRO-C3算法

    继承关系图:树结构 广度优先遍历:先找A,再找B.C,最后找D.E.(顺序:A.B.C) 深度优先遍历:先找A,再找B,接着找D.E(把B里面找完):然后找C.(顺序:A.B.D.E.C) MRO-C ...

  10. pytest 学习笔记一:参数化与组织分层

    组织分层: 1.普通方式,和unittest分层类似: setup_module()  # 通常放在类外 setup_class(cls) setup(self) teardown(self) tea ...