看一个用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_修改文件权限chmod 、改变文件/目录所有者chown

    chmod使用事例 数字方法 chmod -R 751 [FILE] ugoa方法 chmod -R u=wrx,g=rx,o=x [FILE] 说明 chmod [OPTION] [MODE] [F ...

  2. python之Map函数

    # map()函数使用举例 # 功能:map()接受一个函数f和一个或多个list,将f依次作用在list的每个元素,得到一个新的列表 # 语法:map(方法名,列表,[列表2]) # 注意:map( ...

  3. Python——反射

    反射的定义:使用字符串类型的名字 去操作变量 hasattr 函数 与getatter配合使用,用来判断变量是否存在 if hasatter(my,'a'):#如果为真执行 getatter(my,' ...

  4. Enea推出Linux实时加速方案专门针对Xilinx UltraScale+

    导读 Enea(纳斯达克OMX Nordic:ENEA)Linux实时加速方案的扩展版本,完全集成了Xilinx UltraScale +系列的所有处理单元.借助Xilinx开发者大会(XDF)201 ...

  5. python 时间模块 -- time

    time 时间模块 和时间有关系的我们就要用到时间模块.在使用模块之前,应该先导入模块. # 常用方法 import time print("现在执行我") time.sleep( ...

  6. Hibernate基本应用01

    一. Hibernate简介 1.1 Hibernate介绍 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全 ...

  7. day13 生成器 三元运算 列表解析

    本质上来说生成器迭代器都是一种数据类型,如果你直接打印生成器是无法得出值的,会得到一串内存地址,即一个对象想要得到生成器的值必须要用for或者next,list等来获取 生成器生成器就是一个可迭代对象 ...

  8. [树链剖分]hihocoder1883

    描述 有一个无向图,有n个点,m1条第一类边和m2条第二类边.第一类边有边权,第二类边无边权.请为第二类的每条边定义一个边权,使得第二类边可能全部出现在该无向图的最小生成树上,同时要求第二类边的边权总 ...

  9. 自学Linux Shell18.3-sed实用工具

    点击返回 自学Linux命令行与Shell脚本之路 18.3-sed实用工具 1. 加倍行间距 命令格式: .......

  10. 【LOJ#6041】事情的相似度（后缀自动机）

    [LOJ#6041]事情的相似度(后缀自动机) 题面 LOJ 题解 \(\mbox{YCB}\)搬了这道题目...\(\mbox{QwQ}\) 还是用到\(lcp\)就是\(parent\)树上的\( ...