坐标轴

在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x、y、z三条轴组成的立体空间,x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

<!-- 在本身元素上设置透视无效果 -->
<div style="float:left;margin-right: 10px;border:2px solid gray;">
<div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div> <!-- 在父级元素上设置透视有效果 -->
<div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">
<div style="width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div>

perspective-origin

  值: x轴 y轴

  初始值: 50% 50%

  应用于: 非inline元素(包括block、inline-block、table、table-cell等)

x轴
left: 0% center: 50% right: 100%
y轴
top: 0% center: 50% bottom: 100%

矩阵matrix3d

  3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言,3d矩阵matrix3d却有12个参数。其变形规则与2dmatrix()类似,只不过是从3*3矩阵,变成了4*4矩阵

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)
 

3d位移

  3d位移函数主要包括traslateZ()和translate3d()

translate3d(x,y,z)

  [注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值

3d缩放

  3d缩放函数主要包括scaleZ()和scale3d()

scale3d(x,y,z)

  默认值为scale3d(1,1,1),当参数为负值时,先翻转再缩放

scaleZ(z)相当于scale3d(1,1,z)

  [注意]3d位移函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

  [注意]scaleZ()和scale3d()单独使用时没有任何效果

.box1 .in{
transform: translateZ(-500px);
}
.box2 .in{
transform: translateZ(-100px);
}
.box3 .in{
transform: scaleZ(5) translateZ(-100px);
}
//下图中从左到右分别是box1,box2,box3。由此得知,box3也相当于向z轴移动了-500px

  所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的

3d旋转

  3d旋转函数主要包括rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(x,y,z,Ndeg)

  x、y、z分别用来描述围绕x、y、z轴旋转的矢量值。最终变形元素沿着由(0,0,0)和(x,y,z)这两个点构成的直线为轴,进行旋转。当N为正数时,元素进行顺时针旋转;当N为负数时,元素进行逆时针旋转

  [注意]safari浏览器不支持keyframes中改变rotate3d()

rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)

背景可见

  元素的背面默认是可见的。但有时需要让元素背面不可见,这就要用到属性backface-visibility

backface-visibility: 设置元素背面是否可见

visible:可见,默认
hidden:不可见

变形风格

  变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值,表示2d平面;而perserve-3d表示3d空间

  [注意]当设置了overflow:非visible或clip:非auto时,transform-style:preserve-3d失效

transform-style: flat | preserve-3d

深入理解 CSS变形 transform(3d)的更多相关文章

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

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

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

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  3. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  4. css变形 transform【转】

    transition:过度属性 transition-property 规定设置过度效果的css属性的名称,默认可以写all transition-duration 规定完成过度效果需要多少秒或毫秒 ...

  5. 前端零基础 --css转换--skew斜切变形 transfor 3d

    前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急

  6. CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  7. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  8. CSS变形动画

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

  9. 用CSS变形创建圆形导航

    http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...

随机推荐

  1. JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器

    小于选择器 jQuery( ":lt(index)" ) jQuery( ":lt(-index)" ) 描述:选择所有小于指定下标的元素. <!DOCT ...

  2. 前端面试题第二波,要offer的看过来~

    快来测试测试自己掌握能力吧! 1. class.forname的作用?为什么要用? 1).获取Class对象的方式:类名.class.对象.getClass().Class.forName(" ...

  3. Java基础学习第一天

    ================每日必读==================== 写代码: 1.明确需求.我需要实现什么需求? 2.分析思路.我需要怎么实现需求? 3.确定步骤.我的每一部分思路需要使 ...

  4. java_method_正则校验

    /** * * @Title: validadeRegExp * @Descrption : TODO (正则校验) * @param regExp * @param obj * @return * ...

  5. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  6. 【HDOJ】1244 Max Sum Plus Plus Plus

    这题目一直wa,原来是因为我把JUDGE写错了,对拍了一下午都没检查出来.水DP啊. #include <cstdio> #include <cstring> #include ...

  7. HTML父子页面通信问题(showModalDialog)

    1. showModalDialog参数说明 window.showModalDialog(URL, ARGS,Features)(在父窗口中调用打开新的窗口) URL          --  必选 ...

  8. JVM探索(一)

    JVM测试的样例代码: import java.lang.management.ManagementFactory; /**  * @author zhailzh  *   * @Date 2015年 ...

  9. 关于unsigned int和int的加法

    补码(two's complement) 在计算机系统中,数值一律用补码来表示和存储.原因在于,使用补码,可以将符号位和数值域统一处理:同时,加法和减法也可以统一处理.此外,补码与原码相互转换,其运算 ...

  10. libvirt 基于C API基本使用案例

    玩开源分享,需要有干到底的精神,今晚随便逛逛技术论坛突发有感;Ruiy不足之处,需跟进了; 最近变的较懒了,干活有点没劲,也不怪干来干去收获不大,缺少鼓励! 现在玩的技术大多是上不了台面了,想过没,你 ...