前面介绍了css3 2D变形（transform）移动、缩放、旋转、倾斜

有2D 也有3D，例如3D transform中有下面这三个方法：

  • rotateX( angle )
  • rotateY( angle )
  • rotateZ( angle )

perspective 属性定义 3D 元素距视图的距离，以像素计（一般取500px）。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

注释：perspective 属性只影响 3D 转换元素。

更多有关3d和透视的知识可以参考张鑫旭前辈的文章——CSS3 3D transform变换，不过如此

变形和透视 perspective的更多相关文章

  1. CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

    2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...

  2. 第99天：CSS3中透视perspective

    CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...

  3. CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局

    1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...

  4. 立体透视 perspective transform-style 倾斜旋转

    1.perspective 是设置镜头距离,距离越远视图越小,视图越近,视图越大.就像相机焦距一样.其只对子元素产生效果. 2.transform-style: preserve-3d 设置3d效果, ...

  5. CSS之透视perspective属性

    透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 书写方式不同的定义 perspective有两种定义方式,如下 .class{ perspective: 800px; } ...

  6. 深入理解CSS变形transform(3d)

    × 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...

  7. CSS3 变形、过渡、动画、关联属性浅析

    一.变形 transform:可以对元素对象进行旋转rotate.缩放scale.移动translate.倾斜skew.矩阵变形matrix.示例: transform: rotate(90deg) ...

  8. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  9. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

随机推荐

  1. iis 经典模式和集成模式

    IIS7.0中的Web应用程序有两种配置模式:经典模式和集成模式.两者区别大家可以参考下,根据实际情况选用.  经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于 ...

  2. C# 阿拉伯数字转换为中文数字/中文数字转换为阿拉伯数字

    项目中经常会格式化数据,转换数字的使用情况比较多,记录一下数字转换的方法! 如果需要转换为繁体中文,将数组里的汉字换成繁体中文即可. 1.阿拉伯数字转换为中文数字 /// <summary> ...

  3. ubuntu环境下pycharm编译程序import包出错：ImportError: dynamic module does not define init function (init_caffe)

    出错原因是因为pycharm中的python版本不对,比如程序为2.7版本,但是pycharm编解释器为python3,导致出错,去setting改一下版本就行:pycharm>file> ...

  4. CSS选取第一个、最后一个、偶数、奇数、第n个标签元素

    1.first-child first-child表示选择列表中的第一个标签.例如:li:first-child{background:#fff} 2.last-child last-child表示选 ...

  5. Docker本地镜像上传到阿里云仓库

    登录阿里云 在容器镜像服务中先创建命名空间 随后创建镜像仓库 我使用的代码源是本地仓库 创建后点击仓库的管理 就可以看到阿里云提供的操作指南 (下面的操作每个人都不同,详情查看阿里云的操作指南) 输入 ...

  6. 第五次个人作业---Alpha2项目测试

    这个课程属于哪个课程 <课程的链接> 作业的要求 <作业要求的链接> 团队名称 <团队名称:六扇门编程团队> 作业的目标 从一个普通用户的角度,在测试其他团队项目的 ...

  7. jQuery 中的 Ajax 方法（节选）

    $.ajax() 基本用法: $.ajax({ url: url, // 地址 data: data, // 参数 type: 'POST', // 提交方式 可以选择 post/get 推荐 pos ...

  8. P1338 末日的传说[水题]

    题目描述 只要是参加jsoi活动的同学一定都听说过Hanoi塔的传说:三根柱子上的金片每天被移动一次,当所有的金片都被移完之后,世界末日也就随之降临了. 在古老东方的幻想乡,人们都采用一种奇特的方式记 ...

  9. WA又出现了

    为甚么本蒟蒻写的代码永远有BUG? 为甚么本蒟蒻永远检查不出错误? 通过良久的分析,我得出一个结论:写代码也要有信仰. 人是要有信仰的,OI选手也不例外. 原因就是写之前没有膜拜上帝.真主.释迦摩尼. ...

  10. angular ionic 解决微信页面缓存问题

    # 在路由对应的页面路径后面加时间戳 .state('viewName', { url: '/viewName', cache: false, templateUrl: function(){ ret ...