立方体: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. ABAP程序系统字段中英文详解

    SY-SUBRC: 系统执行某指令后,表示执行成功与否的变量,’0’ 表示成功SY-DBLNT: 被处理过的记录的笔数 SY-UNAME: 当前使用者登入SAP的USERNAME;SY-DATUM: ...

  2. SharePoint 2013 手动删除爬网项目

    本文介绍如何手动删除某些搜索项目,其实删除搜索项目并不常用,主要还是在刚刚完成爬网,就删除了某些项目,然后有比较敏感需要马上删除的时候.下面,就跟着图文简单了解下手动删除已爬网的项目吧. 1.配置好搜 ...

  3. SharePoint 2013 术语和术语集介绍

    托管元数据是一个集中管理的术语的分层集合,我们可以定义术语和术语集,然后将其用作 SharePoint Server 2013 中项目的属性.简单的说,术语是一个可与 SharePoint Serve ...

  4. [ html canvas 透明度 globalApha ] canvas绘图属性 透明度 globalApha 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. 汇编语言--寄存器(cpu工作原理)

    本文地址:http://www.cnblogs.com/archimedes/p/assembly-register.html,转载请注明源地址. 本文主要将介绍的是8086 CPU中的寄存器, 寄存 ...

  6. IOS异常日志记录与展现功能

    在平常的APP开发过程中经常碰到程序遇到异常闪退的问题,通过日志可以把相关的详细错误信息进行记录,本实例要记录不管在哪个页面出错都要进行记录,这边使用到的日志记录插件CocoaLumberjack,以 ...

  7. git常用命令,git版本控制和Xcode结合使用,用Xcode提交到github,github客户端使用

    1.git常用命令 查看命令: 1.git --help 查看git所有命令 2.git clone -help 查看git clone命令的细节 3.git config -l   查看当前所有配置 ...

  8. Nodejs断言测试

    var assert = require('assert');/*node中,我们可以使用assert模块来测试代码.equal()和notEqual()分别作相等性和不等性的判断,第一个参数是期望值 ...

  9. Azure 自动化里添加ResourceManager模块

    最近想尝试通过Azure里的自动化功能来控制VM的定时开关机,找到网上的一篇文章,  按照文章操作到"Import Azure Resource manager module"的第 ...

  10. JavaScript的函数重载

    java语言中函数的重载和重写可谓是很重要的概念,所以在写js的时候时不时的会想到这种用法,重写先不说,这里只说重载.. <script language="JavaScript&qu ...