css3d
立方体: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的更多相关文章
- CSS3D效果
效果如本博客中右边呢个浅色框框,来自webpack首页(IE绕路0_0) github地址:http://wjf444128852.github.io/demo02/css3/css3d/ 思路: 1 ...
- 利用CSS3D效果制作简易旋转木马效果
最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...
- css3D的魅力
前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-or ...
- CSS3D 转换调试
css3d 测试工具 效果如图: 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- css3D动画
css3D动画 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transf ...
- css3d总结
3d舞台 设置 perspective(景深): length, 可以设置overflow:hidden 3d舞台下 -> 3d元素容器 设置 transform-style: preserv ...
- css3-d ,动画,圆角
一.3D 开启元素3D transform-style: preserve-3d; Z轴 正数 屏幕外,反之屏幕内 近大远小 perspective: length (必须大于等于0) -- 在3D元 ...
- CSS3D模型
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- CSS3D写3d画廊滚动
CSS样式表 *{ margin: 0; padding: 0; } .wrapper{ width: 800px; height: 600px; background: #87CEEB; margi ...
随机推荐
- KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用 最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEdit ...
- NPOI导出数据到Excel
NPOI导出数据到Excel 前言 Asp.net操作Excel已经是老生长谈的事情了,可下面我说的这个NPOI操作Excel,应该是最好的方案了,没有之一,使用NPOI能够帮助开发者在没有安装微 ...
- 安卓问题集-Installation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED
错误出现原因: 1.没有 AndroidManifest.xml file文件(出现几率较小) 2. 是你在外面修改了包名而在 AndroidManifest.xml file.文件中没有同步过去导致 ...
- App开发流程之图像处理工具类
先罗列一下工具类中提供的方法: /** * 根据原始view和毛玻璃样式,获取模糊视图,并自动作为原view的subview(如果不需要作为子视图,自行调用removeFromSuperview) * ...
- JSONKit解析json数据
先将第三方文件拖进工程 JSONKit.h和JSONKit.m 然后设置在ARC工程中添加MRC文件,如下图所示 #import "ViewController.h" #impor ...
- iOS开发笔记5:多线程之NSThread、NSOperation及GCD
这篇主要总结下iOS开发中多线程的使用,多线程开发一般使用NSThread.NSOperation及GCD三种方式,常用GCD及NSOperation. 1.NSThread 创建线程主要有以下三种方 ...
- 朝花夕拾-android 自定义application 管理activity的生命周期
为了安全退出多个已创建的activity? 可以自定义application:myapplication. 增加一个list成员保存,一些关键的已创建的activity实例: private List ...
- 快速排序(java版)
public class QuickSortTest{ //比较与交换 private static int partition(int[] source, int low, int hight) { ...
- 选择排序(java版)
public class SelectSortTest { public static void selectSort(int[] source) { for (int i = 0; i < s ...
- OC语言-02-OC语言-基础知识
一.基础语法 1> OC语言和C语言 C语言是面向过程的语言,OC语言是面向对象的语言 OC语言继承了C语言,并增加了面向对象的思想 以下内容只介绍OC语言与C语言的不同之处 2> 关键字 ...