立方体: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. Form.action传值问题

    通过浏览器地址栏输入url并通过?传递参数请求资源时,?后面的参数叫做 "查询字符串",会触发后台Servlet的doGet(),因为通过浏览器地址栏直接访问的方式是GET方式. ...

  2. 操作集合的工具类:Collections

    Java提供了一个操作Set.List和Map等集合的工具类:Collections,该工具类提供了大量方法对集合进行排序.查询和修改等操作,还提供了将集合对象置为不可变.对集合对象实现同步控制等方法 ...

  3. [leetcode] Contains Duplicate

    Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your funct ...

  4. Android开发, 如何看logcat

    有如下log:   android.view.InflateException: Binary XML file line #2: Error inflating class com.hankkin. ...

  5. Java线程池的实现

    线程池的作用: 一个线程的周期分为:创建.运行.销毁三个阶段. 处理一个任务时,首先创建一个任务线程,然后执行任务,完了还要销毁线程.而线程只有处于运行状态的时候,才是真的在处理我们交给它的任务,这个 ...

  6. Flash网站Loading制作

    Flash网站Loading制作~~~ stop(); stage.scaleMode=StageScaleMode.NO_SCALE; //指定舞台属性为不跟随播放器大小而改变 stage.show ...

  7. 关于google电子地图跟卫星地图位置不重合

    再做项目时,用到了google地图的显示位置,就是在网页上插入事物在地图上的位置,点击卫星地图跟电子地图时发现不是重合,网上GOOGLE了下,说是加密的问题给偏移了500米左右,用google测量工具 ...

  8. CentOS下一键安装Openstack

    CentOS下一键安装Openstack 系统环境:Oracle VirtualBox 4.38CentOS-6.5-x86_64-bin-DVD1.iso 安装前需要修改 /etc/hosts文件, ...

  9. Azure 上为Liunx VM 挂载File类型的存储。

    1. Create a storage account in Azure, copy the storage account endpoint URL (with postfix of "f ...

  10. Centos 部署Keepalive高可用软件

    Keepalive安装部署   一.环境介绍 1)Centos6.4 2) keepalived-1.2.12 3) 主备机的ip Master:172.31.100.5 Slave: 172.31. ...