一、坐标系

  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. Eclipse MyBatis generator 1.3.7插件的核心包(中文注释)

    一.最近刚搭建一个项目框架,使用springboot + mybatis,但是在使用Eclipse开发时发现开发mybatis的Dao.mapper.xml和entity时特别不方便,手工去写肯定是不 ...

  2. Ubuntu 更新错误修复大全

    合并列表问题 当你在终端中运行更新命令时,你可能会碰到这个错误“合并列表错误”,就像下面这样: E:Encountered a section with no Package: header, E:P ...

  3. 关于maven工程将model删除重建之后变为灰色的问题的解决

    问题描述: IDEA中的maven工程中有时候将model或者子model建错,删除之后,子模块在maven在侧栏的maven projects中是灰色的,而且是并没有依赖父工程 在网上搜了搜解决办法 ...

  4. 服务器断过一次电之后,mysql启动不了了

    公司内部服务器,周末会直接拉闸断电,之前也没问题,但这次回来发现mysql启动不了了. service mysqld start 提示: Starting MySQL.The server quit ...

  5. cordova开发笔记

    搜狐邮箱APP 使用了cordova框架,遇到了一些列问题,稍微总结记录下 扩展支持appInBrowser,用来以新窗口方式打开外链url 解决跨域问题(cordova默认当前域为localhost ...

  6. substring常用的两种方法

    1.public String substring(int beginIndex, int endIndex) 第一个参数int为开始的索引,对应String数字中的开始位置, 第二个参数是截止的索引 ...

  7. 17.获取代理ip

    import redis import telnetlib import urllib.request from bs4 import BeautifulSoup r = redis.Redis(ho ...

  8. USACO training course Mother's Milk /// DFS(有点意思) oj10120

    题目大意: 输入 A B C 为三个容器的容量 一开始A B是空的 C是满的 每一次倾倒只能在 盛的容器满 或 倒的容器空 时才停止 输出当A容器空时 C容器内剩余量的所有可能值 Sample Inp ...

  9. JS规则 编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。

    编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在  ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...

  10. 常见的React面试题

    1.redux中间件 答:中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer ...