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 ...
随机推荐
- python多线程ssh爆破
python多线程ssh爆破 Python 0x01.About 爆弱口令时候写的一个python小脚本,主要功能是实现使用字典多线程爆破ssh,支持ip表导入,字典数据导入. 主要使用到的是pyth ...
- javascript 全局变量 局部变量 var 与不加var的区别
一.外部的为全局,内部的为局部变量. 二.加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后) <script type="text/javascrip ...
- 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办? foreverjs, 文摘随笔
守护进程 方案一 npm install forever https://github.com/foreverjs/forever 方案二 npm install -g supervisor http ...
- ubuntu wireshark finish
http://blog.csdn.net/cumirror/article/details/4694283 安装编译工具: $sudo apt-get install build-essential ...
- 3.输入三个整数,xyz,最终以从小到大的方式输出。利用嵌套。
<body>请输入a的值:<input type="numbe" id="a" value=""/>请输入b的值:& ...
- SQL 相关
SET STATISTICS TIME ON 记录查询的相关数据 生成随机Guid SELECT NewID() 按照某一列排序并生成序号 select Row_Number() OVER (ORDE ...
- 完全卸载VS2005或VS2008的步骤
手动卸载步骤: Visual Studio Express Editions 进入控制面板,运行添加或删除程序 卸载 "MSDN Library for Visual Studio 200 ...
- HTTPS连接的前几毫秒发生了什么——Amazon HTTPS案例分析
转自: http://blog.jobbole.com/48369/ 提示:英文原文写于2009年,当时的Firefox和最新版的Firefox,界面也有很大改动.以下是正文. 花了数小时阅读了如潮的 ...
- HTTPS(SSL/TLS) 原理之深入浅出
注:本文参考自网络上的多篇HTTPS相关文章,本人根据自己的理解,进行一些修改,综合. 1. 必要的加密解密基础知识 1)对称加密算法:就是加密和解密使用同一个密钥的加密算法.因为加密方和解密方使用的 ...
- 数据库update的异常一例
调查一列bug,偶然发现了update的一个特性:update t set a=a+1 where id=4; 这样一条简单的语句,也会发生让人意外的事情: 如果 a 的初始值为null时,无论你up ...