看一个用css3写幻灯片的demo用到了这么几个属性

.demo{
-webkit-transform-style:preserve-3d;
-webkit-perspective:800px;
-webkit-transform-origin:left;
backface-visibility:hidden;
}

一时半会儿理解不了,什么景深,Z轴,虽然有一些以前高中学立体几何学过吧,但是貌似又有很大的区别,于是就查了下资料。

没想到,哪都有张鑫旭!

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

写的还蛮生动的,瞬间我就理解了。

由-webkit-transform-style:preserve-3d;所想的更多相关文章

  1. CSS Transform Style

    As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...

  2. CSS3 transform变形(3D转换)

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  3. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  4. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  5. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  6. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  7. 介绍css 的3D 变换(3D transform)

    https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...

  8. 基本3D变换之World Transform, View Transform and Projection Transform

    作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...

  9. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  10. 前端的3D(css3版本)

    其实是依托Css3的功劳,先上一个例子 代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transfor ...

随机推荐

  1. Linux:cut命令详解

    cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 说明 该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将它们的 ...

  2. Baltic Dry Index

    波罗的海干散货指数(Baltic Dry Index,缩写BDI),是航运业的经济指标,它包含了航运业的干散货交易量的转变. BDI波罗的海指数是由几条主要航线的即期运费(Spot Rate)加权计算 ...

  3. BZOJ3417[Poi2013]Tales of seafaring——BFS

    题目描述 Young Bytensson loves to hang out in the port tavern, where he often listens to the sea dogs te ...

  4. JavaScript无法运行问题

    [出现问题] JavaScript代码在html页面可以正常运行,在js文件夹下无法正常运行 [解决方案] 根据网上查的和自己错误的原因总结下. 1.引用Js的路径不对 ../ 表示上一级目录开始 . ...

  5. SharePoint 2013 APP 开发示例 (六)服务端跨域访问 Web Service (REST API)

    上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...

  6. 【转】九大排序算法-C语言实现及详解

    概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大, ...

  7. luogu1514 [NOIp2010]引水入城 (bfs+记忆化搜索)

    我们先bfs一下看看是否能到最底下的所有点 如果不能的话,直接把不能到的那几个数一数就行了 如果能的话: 可以发现(并不可以)某格能到达的最底下的格子一定是一个连续的区间 (因为如果不连续的话,我们先 ...

  8. Angularjs中的$q详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  9. docker的memory和cpu资源限制

    这里仅针对docker本身,不涉及任何编排工具compose或者k8s等. 按照惯例,官文撸起来. 重要的部分是一些选项,用来限制资源大小. Memory Most of these options ...

  10. Java NIO -- 通道 Channel

    通道(Channel):由 java.nio.channels 包定义的.Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的“流”.只不过 Channel本身不能直接访问数据 ...