一、坐标系

  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. 用while实现登录操作(3次过后,输入yes,使counter置0,还可以玩)

    用while实现登录操作(输入yes,使counter置0,还可以玩)#_author:Administrator#date:2019/10/24user_name="star"p ...

  2. prometheus配置详情

    https://prometheus.io/docs/prometheus/latest/configuration/configuration/ 下面监控宿主机和容器的内存,CPU,磁盘等状态 gr ...

  3. 更改网卡名称以及重启网卡提示Determining if ip address x.x.x.x is already in use for device eth0

    安装系统完成后,在CentOS6.6下网卡名称变为em1,有些不太方便,还是改回eth0 修改grub配置文件,vi /boot/grub/grub.conf,增加如下红色字体 kernel /vml ...

  4. Mybatis功能架构及执行流程

    原文地址:http://blog.51cto.com/12222886/2052647 一.功能架构设计 功能架构讲解: 我们把Mybatis的功能架构分为三层: (1) API接口层:提供给外部使用 ...

  5. STL容器set用法以及codeforces 685B

    以前没怎么用过set,然后挂训练赛的时候发现set的妙用,结合网上用法一边学一边写. 首先set是一种容器,可以跟其他STL容器一样用 set<int > s 来定义, 它包含在STL头文 ...

  6. PAT甲级——A1115 Counting Nodes in a BST【30】

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  7. 4_6.springboot2.xWeb开发之错误处理机制

    1.SpringBoot默认的错误处理机制 默认效果:1).浏览器,返回一个默认的错误页面 浏览器发送请求的请求头: ​ 2).如果是其他客户端,默认响应一个json数据 原理: ​ 默认情况下,Sp ...

  8. East Central North America 2006 Hie with the Pie /// 状压dp oj22470

    题目大意: 输入n,有n个地方(1~n)需要送pizza pizza点为0点 接下来n+1行每行n+1个值 表示 i 到 j 的路径长度 输出从0点到各点送pizza最后回到0点的最短路(点可重复走) ...

  9. 满血复活前的记录(持续更新ing)

    时隔一年重新开启算法竞赛征程. 该记录大多为老课件.已经做过的习题重做和已经看过的书本重看 7.21 下午到山大 娄晨耀basic_algorithm课件中的内容: 复习线性筛原理 复习差分 做完Co ...

  10. 【案例】DIV随鼠标移动而移动

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