立方体: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. Backbone学习笔记一Backbone中的MVC

    原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...

  2. 复杂领域的Cynefin模型和Stacey模型

    最近好奇“复杂系统”,收集了点资料,本文关于Cynefin模型和Stacey模型.图文转自互联网后稍做修改. Cynefin模型提供一个从因果关系复杂情度来分析当前情况而作决定的框架,提出有五个领域: ...

  3. 在IntelliJ IDEA14中安装go语言插件

    go语言的集成开发环境仍不成熟,试用了liteide,感觉很不适应,弹出菜单对程序员的干扰太大.所以就试大牌的IntelliJ IDEA,这工具本来是JAVA开发阵营的,不过它已经变为一个非常强大的支 ...

  4. [leetcode] Rectangle Area

    Rectangle Area Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectang ...

  5. 提高eclipse使用效率(二) 提高Android开发效率的小技巧

    XML文件的代码提示 adt中也有xml文件的代码提示,为了让提示来的更加猛烈,我们还要设置一下 打开eclipse - Window - Preferences,在右边的目录树中切换到XML - X ...

  6. 【读书笔记】iOS-属性列表

    一,在Cocoa中,有一类名为属性列表的对象,常简写为plist.这些列表包含Cocoa知道如何操作的一组对象.具体来讲,Cocoa如何知道将这们保存在文件中并进行加载.属性列表类包括NSArray, ...

  7. 弃用的同步get和post请求

    #import "ViewController.h" #import "Header.h" @interface ViewController () <N ...

  8. Spring(二)Bean入门

    一.BeanFactory介绍 1.1.Bean: 在Spring技术中是基于组件的 最基本了是最常用的单元 其实实例保存在Spring的容器当中 Bean通常被定义在配置文件当中,Bean实例化由S ...

  9. 学习C语言常用的几个网站

    今天整理资料,发现了以前学习C语言时,常用到的几个网站: 1.http://ganquan.info/standard-c/   改网站包含了C语言标准版的15个头文件解释以及函数,137个函数和演示 ...

  10. iOS-代理反向传值<转>

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...