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 ...
随机推荐
- anriod TabHost
package com.example.yanlei.mytk; import android.os.Bundle; import android.support.v7.app.AppCompatAc ...
- andriod CheckBox
<?xml version="1.0" encoding="UTF-8"?> <LinearLayout android:orientatio ...
- Add a file to a Document Library and update metadata properties in a single method添加文档的方法
private void AddFileToDocumentLibrary(string documentLibraryUrl, string filename, byte[] file_bytes, ...
- Android线程池(二)
本篇主要介绍Android自带的线程池的管理. 包含开始任务.重新加载.添加删除任务等,示例代码如下: package com.jiao.threadpooltest; import java.uti ...
- 如何避免Activity 被杀死
我们都知道,在android系统中,内存不足的时候,系统是可以杀死任何暂停.停止或者销毁的Activity.这就意味着基本上没有在前台的Activity都会面临被关闭的可能. Android系统之所以 ...
- JQuery怎么实现页面刷新后保留鼠标点击样式的方法
今天抽空研究了下鼠标点击添加样式的方法.为了防止忘记,写篇文章算是备份吧. $('ul.main-menu li a').each(function(){ if($($(this))[0].h ...
- android文件存储位置切换
最近有个需求,助手的google卫星地图和OpenCycleMap下载的离线地图数据,要能够在内置存储和外置存储空间之间切换,因为离线瓦片数据非常大,很多户外用户希望将这些文件存储在外置TF卡上,不占 ...
- win7 64位安装oracle10g出现未知错误,程序异常终止解决方法
修改Oracle 10G\database\stage\prereq\db\refhost.xml 在 </SYSTEM> <CERTIFIED_SYSTEMS>后面添加 &l ...
- git 一般的开发流程中的代码管理
一般的开发流程中的代码管理 1. 从版本库中下载代码 git clone ssh://wenbin@192.168.1.3:29418/mustang-web 2. 针对某个feature(比如ins ...
- MongoDB(一)
问题解决 1.由于目标计算机积极拒绝 无法连接 原因:还没有启动mongodb,就使用mongo命令 解决方法:在bin目录下输入 mongod --dbpath XXXX/data 然后在输入 mo ...