一、坐标系

  1、是我们熟悉的右手坐标系:伸出右手,让拇指和食指成L形,大拇指向为右,食指向上,中指指向前方,这样,拇指、食指、中指的指向分别是X、Y、Z轴的正方向。

  2、是我们CSS3中的3D坐标:伸出左手,让食指和拇指成L形,大拇指指向右,食指向上,中指指向内侧,这样,拇指、食指、中指的指向分别是X、Y、Z轴的正方向。

二、透视

  一般会加到父元素或者是body上

    perspective:100px;

  视距:眼睛到屏幕的距离:视距越大,透视效果越明显,相反则越不明显

三、背面是否可见

  backface-visibility:hidden;背面不可见,则我们会看到这个元素下层的元素或者背景。

  

css3的3D变形的更多相关文章

  1. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  2. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  3. css3 3D变形 入门(一)

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

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

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

  5. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  6. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  7. 3D变形旋转

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  9. 用CSS3做3D动画的那些事

    年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...

随机推荐

  1. System.Web.Mvc.HttpDeleteAttribute.cs

    ylbtech-System.Web.Mvc.HttpDeleteAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral ...

  2. iOS开发JSON字符串和字典互转

    1.相关属性简述 NSJSONReadingOptions读取属性: typedef NS_OPTIONS(NSUInteger, NSJSONReadingOptions) { NSJSONRead ...

  3. PAT甲级——A1126 Eulerian Path【30】

    In graph theory, an Eulerian path is a path in a graph which visits every edge exactly once. Similar ...

  4. openstack各组件介绍

    Nova:计算服务,通过虚拟化技术,实现虚拟机的创建,管理,删除,是openstack中最核心的服务. Neutron:网络服务,为虚拟机提供网络连接服务,就像物理机的交换机和路由器一样 Glance ...

  5. 第四周课堂笔记3th

    1.函数的嵌套 作用域,说的是变量 全局作用域:内置命名空间,全局命名空间  全局空间不可以引用局部空间 局部作用域: 局部命名空间  开辟的临时空间前提是调用了函数 全局作用域在整个文件中被使用 L ...

  6. 我最恨ubuntu的自动升级内核功能

    总是提示我boot分区空间不足, 怎么办, 删除原有不用的内核呗,手动来做. 1.查看当前使用内核版本号.输入 uname -a 查看.uname -a 2.删除旧内核. 切换root: su 输入命 ...

  7. springboot+vue的前后端分离与合并方案

    pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...

  8. 自定义Jquery:ajax,get,post方法

    var myAjax = { request: function(url, type, data, callback) { $.ajax(url, { type: type, data: data, ...

  9. QVaraint类

    一.QVaraint简介     QVaraint类作为一个包含了大多数Qt普通类型的的联合体类.因为c++联合体没有构造函数和析构函数的,许多继承的Qt类不能够在联合体当中使用.(联合体当中的变量共 ...

  10. activeMQ消息队列安装配置

    1.  下载 到官网下载最新版本,有windows版本和linux版本的. http://activemq.apache.org/download.html 2.   windows下部署 Activ ...