父元素要添加属性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. js版MD5 (Message-Digest Algorithm)加密算法

    /**** MD5 (Message-Digest Algorithm)* http://www.webtoolkit.info/***/ var MD5 = function (string) { ...

  2. 生产者消费者 wait（）。 notify（）

    public class ThreadDemo3 { public static void main(String[] args){ MyList list = new MyList(); Produ ...

  3. js基础-运算符

    100 * "20" 字符串转数字 5 * "ss"  NAN "ss" 转数字返回NAN 任何数字与NAN +-*/ 都返回NAN 5/N ...

  4. git gitlab 使用 提交代码解决冲突

    1.更改完代码后,git push 发生错误 注: 此时,使用 git pull: 更新代码,git 会自动merge不同的更新, a.  如果git 自动merge成功,再进行 git push操作 ...

  5. jquery 获取子元素的限制jquery

    今天练习jqueryAPI发现一个问题就是子元素如果采用nth-child,元素不同就获取不到,因此一个父元素下的子元素标签必须相同,如果不同第一个元素可以用这个方法实现,但是如果第二元素及以后如果出 ...

  6. 径向模糊（Radial Blur）

    [径向模糊(Radial Blur)] 径向模糊,是一种从中心向外呈幅射状的逐渐模糊的效果,在图形处理软件photoshop里面也有这个模糊滤镜.而在游戏中常常用来模拟一些动感的效果,如鬼泣4中的场景 ...

  7. java正则验证

    String regex ="[A-Z]{4}[0-9]{7}"; List<String> non= new ArrayList<String>(); f ...

  8. cdnbest节点安装后连不上cdn主控原因排查

    1. 查看节点程序是否启动 ps -aux |grep kangle 2. 登陆cdn节点用telnet命令查下和主控的通信,命令:telnet 主控ip 3320 3. 如果节点程序都有启动,可查看 ...

  9. 用PLSQL Developer 查看Oracle的存储过程

    1 2.输入 3.具体存储过程

  10. JavaScript 中this的实现原理

    学懂 JavaScript 言语,一个标志就是了解下面两种写法,或许有不一样的成果. <blockquote "=""> var obj = { foo: f ...