立方体:http://sandbox.runjs.cn/show/1h6zvghj

原理分析:(左负右正)

x:与屏幕水平;(在屏幕上)

y:与屏幕水平方向垂直(在屏幕上)

z:垂直于屏幕(在屏幕外)

rotate:顺时针为正,逆时针为负。

translateZ:靠近自己的为正,远离自己的为负。

perspective:一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致!!

舞台---

   容器----

      元素-----

      元素-----

      元素-----

      元素-----

      ......

舞台:

perspective: 800px;

容器:

transform-style: preserve-3d;

元素:

transform: rotateY( 160deg ); 

css3d的更多相关文章

  1. CSS3D效果

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

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

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

  3. css3D的魅力

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

  4. CSS3D 转换调试

    css3d 测试工具 效果如图: 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  5. css3D动画

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

  6. css3d总结

    3d舞台 设置 perspective(景深): length, 可以设置overflow:hidden 3d舞台下 -> 3d元素容器  设置 transform-style: preserv ...

  7. css3-d ,动画,圆角

    一.3D 开启元素3D transform-style: preserve-3d; Z轴 正数 屏幕外,反之屏幕内 近大远小 perspective: length (必须大于等于0) -- 在3D元 ...

  8. CSS3D模型

    html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. CSS3D写3d画廊滚动

    CSS样式表 *{ margin: 0; padding: 0; } .wrapper{ width: 800px; height: 600px; background: #87CEEB; margi ...

随机推荐

  1. 解决Sharepoint 2010 custom display form 不显示附件的问题

    sharepoint 2010用designer添加自定义的 display form默认是不会显示附件的. 需要添加如下代码才会显示附件: <tr> <td width=" ...

  2. 2015年第8本(英文第7本):the city of ember 微光城市

    书名:the City of Ember(中文名:微光城市) 作者:Jeanne DuPrau 单词数:6.2万 不重复单词数:未知 首万词不重复单词数:未知 蓝思值:未知 阅读时间:2015年4月2 ...

  3. 转:Android 判断用户2G/3G/4G移动数据网络

    Android 判断用户2G/3G/4G移动数据网络 在做 Android App 的时候,为了给用户省流量,为了不激起用户的愤怒,为了更好的用户体验,是需要根据用户当前网络情况来做一些调整的,也可以 ...

  4. Android 系统版本&API对照表

    最新Android系统版本与API等级对应关系表 数据来源:http://d.android.com/guide/topics/manifest/uses-sdk-element.html#ApiLe ...

  5. ios 删除系统从相册压缩的视频

    iOS的沙盒机制,应用只能访问自己应用目录下的文件.iOS不像android,没有SD卡概念,不能直接访问图像.视频等内容.iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒内.默认 ...

  6. android binder 进程间通信机制6-Binder进程间通信机制的JAVA接口

    Binder间进程通信的JAVA层接口,主要是通过JNI方法来调用Binder库的C/C++接口 在JAVA层,将Service组件称为JAVA服务,Service组件的代理称为JAVA服务代理. 一 ...

  7. OC语言-02-OC语言-基础知识

    一.基础语法 1> OC语言和C语言 C语言是面向过程的语言,OC语言是面向对象的语言 OC语言继承了C语言,并增加了面向对象的思想 以下内容只介绍OC语言与C语言的不同之处 2> 关键字 ...

  8. 关于touch事件对于性能的影响

    第一次写博客随笔,废话不多说,直接进入正题. 最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是touch事件,大家都知道,touch事件有几种,无非就是touchstart,touchmo ...

  9. SAM4E单片机之旅——21、DMAC之USART回显

    DMAC也可以和外设进行数据交互.之前我们曾使用PDC进行USART的数据回显,这次就使用DMAC完成相同的工作.而且由于DMAC有内部的缓冲区,实现起来更为简单. 一. USART设置 因为之前已经 ...

  10. device eth0 does not seem to be present, delaying initialization

    在搭建LVS+Keepalived高可用负载均衡环境的过程中,使用VirtualBox复制了两个Centos的环境,并且选中了“重新初始化网卡”的选项,但是在启动这两个复制的Centos环境的时候,发 ...