立方体: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. ssh无法登录linux服务器的解决办法

    最近之前使用的一台linux服务器被长官重装系统了,导致ssh登录的时候出现如下错误: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  2. Searching External Data in SharePoint 2010 Using Business Connectivity Services

    from:http://blogs.msdn.com/b/ericwhite/archive/2010/04/28/searching-external-data-in-sharepoint-2010 ...

  3. mac java 环境设置

    MAC下JDK1.6下载路径 http://support.apple.com/kb/DL1572 Mac OS的java版本问题和Eclipse中无法找到jdk源代码的问题解决办法 下载包含源代码j ...

  4. 说说Python多线程中的daemon属性方法

    大家看多线程部分的时候肯定看到过daemon这个属性,当我在百度了一圈后也没发现有比较好的解释(或者大家对这个解释都非常清楚),于是自己通过代码和官方介绍了解它,进行了一些总结 给大家一些参考. 首先 ...

  5. Android网络编程只局域网传输文件

    Android网络编程之局域网传输文件: 首先创建一个socket管理类,该类是传输文件的核心类,主要用来发送文件和接收文件 具体代码如下: package com.jiao.filesend; im ...

  6. iOS之 随笔-静态库创建Xcode7

    不多说直接上图 然后你就可以找到你的.a文件了还有你的头文件 在终端可以检查你所编译的静态库都支持什么架构(armv7,armv7s ,arm64)用这个命令 lipo -info 编译时候要看你Xc ...

  7. iOS证书失效

    iOS证书突然失效 今早上班打包直接报错,错误如图 根据错误信息到“钥匙串”里面看了一下证书,证书都莫名其妙的失效了,昨天还是好好的. 重新去钥匙串从证颁发中心获取证书,然后登陆开发者账号重新申请证书 ...

  8. myeclipse2013 安装 egit

    myeclipse2013版本: Version: 2013 Build id: 11.0-20130401     手工安装不了,那就到市场上安装.     1.Help--->Install ...

  9. 关于手机微网站ICP备案

    今天终于拨通了陕西省通信管理局的电话,并告诉对方我们做的是一个化妆品的微网站,会涉及到使用使用支付宝支付. 询问"xxx微网站"网站经营类型,对方告知虽然使用支付宝,但是是微网站, ...

  10. paas架构之docker——容器进程管理

    1.docker进程管理 docker的进程管理命令ps的用法基本和ubuntu系统的用法一致 1.1. 查看docker进程 sudo docker ps –a 1.2. 附着到容器上 Sudo d ...