看一个用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. Windows系统下PHP使用Redis

    参考链接:https://www.cnblogs.com/lhat/p/6402472.html 环境:windows 10  64位操作系统    php 5.4 redis 3.0 1.redis ...

  2. 设计模式笔记：策略模式（Strategy）

    1. 策略模式简介 1.1 定义 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离,手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法,实现方法要根据具体的环境 ...

  3. Hbase之Java API远程访问Kerberos认证

    HbaseConnKer.java package BigData.conn; import BigData.utils.resource.ResourcesUtils; import org.apa ...

  4. Java之使用HttpClient发送GET请求

    package LoadRunner; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import o ...

  5. Highcharts之饼图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. BZOJ5343[Ctsc2018]混合果汁——主席树+二分答案

    题目链接: CTSC2018混合果汁 显然如果美味度高的合法那么美味度低的一定合法,因为美味度低的可选方案包含美味度高的可选方案. 那么我们二分一个美味度作为答案然后考虑如何验证? 选择时显然要贪心的 ...

  7. BZOJ3724 PA2014Final Krolestwo（欧拉回路+构造）

    如果没有长度为偶数的限制,新建一个点向所有奇点连边,跑欧拉回路即可,显然此时一定存在欧拉回路,因为所有点度数都为偶数. 考虑长度为偶数的限制,将每个点拆成两个点放进一个二分图里,那么每条原图中的边在二 ...

  8. Harmonic Number LightOJ - 1234 （分段打表）

    题意: 求调和级数,但n很大啦.. 解析: 分段打表  每间隔50存储一个数,在计算时  只需要找到离输入的n最近的那个数 以它为起点 开始计算即可 emm...补充一下调和级数的运算公式   r为常 ...

  9. day10 递归

    死循环,因此递归必须要定义一个明确的结束条件 def calc(n): print(n) calc(n) calc(10) return 表示终止符号,最终会得出一个确切的返回值,且可以赋值 def ...

  10. BUPT2017 wintertraining(15) #1 题解

    拖了一周才完成的题解,抛出一个可爱的表情 (っ'-')╮ =͟͟͞͞❤️.对我来说E.F比较难,都是线段树的题,有点久没写了. A - Infinite Sequence CodeForces - 6 ...