CSS3 transform变形（3D转换）
一.三维坐标
空间中三维坐标如下图所示：
向上为-Y，向下为+Y，向左为-X，向右为+X，向前为+Z，向后为-Z。
二.perspective(n)为 3D 转换元素定义透视视图
perspective的中文意思是：透视，视角。
没有透视定义，不成3D。
下图为透视的一张图：
CSS3中3D transform的透视点是在浏览器的前方！
需要设置该元素或该元素父辈元素的perspective大小。
perspective(n)定义视点离屏幕的距离。
三.translate3d(x,y,z)，translateX(x)，translateY(y)，translateZ(z)定义3D平移转换
1.translate3d(x,y,z)定义3D平移，x,y,z分别为移动的位移。
如下代码中，设置父元素的perspective( )为1000px，x,y,x值分别设置为100px,100px,100px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">
.father{
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
div
{
width:120px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
-webkit-transform:translate3d(100px,100px,100px); /* Safari and Chrome */
-moz-transform:translate3d(100px,100px,100px); /* Firefox */
transform:translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div class="father">
<div>ORIGINAL</div>
<div id="div2">TRANSFORMED</div>
</div>
</body>
</html>
效果如下图所示：
2.translateX(x)，定义平移转换，只用X轴的值。
如下代码中，设置translateX( )值为100px。
div#div2
{
-webkit-transform:translateX(100px); /* Safari and Chrome */
-moz-transform:translateX(100px); /* Firefox */
transform:translateX(100px);
}
效果如下图所示：
3.translateY(y)，定义平移转换，只用Y轴的值。
如下代码中，设置translateY( )值为100px。
div#div2
{
-webkit-transform:translateY(100px); /* Safari and Chrome */
-moz-transform:translateY(100px); /* Firefox */
transform:translateY(100px);
}
效果如下图所示：
4.translateZ(z)定义平移转换，只用Z轴的值。
定义translateZ( )，必须要先定义perspective值，否则没有效果。
translateZ( )的功能就是让元素在自己的眼前或近或远。
设置的translateZ( )值越小，则子元素越小（因为元素远去，我们眼睛看到的就会变小）,translateZ( )值越大，该元素也会越来越大。
translateZ( )值接近于perspective值时，该元素的大小就会撑满整个屏幕。
如下代码中，设置父元素的perspective( )为1000px，translateZ( )值为120px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">
.father{
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
div
{
width:120px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
-webkit-transform:translateZ(120px); /* Safari and Chrome */
-moz-transform:translateZ(120px); /* Firefox */
transform:translateZ(120px);
}
</style>
</head>
<body>
<div class="father">
<div>ORIGINAL</div>
<div id="div2">TRANSFORMED</div>
</div>
</body>
</html>
效果如下图所示：
四.rotate3d(x,y,z,angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)定义3D旋转
1.rotate3d(x,y,z,angle)定义3D旋转。
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值表示元素顺时针旋转，为负值表示元素逆时针旋转。
如下代码中，设置x,y,z均为1，angle为30deg。
div#div2
{
-webkit-transform:rotate3d(1,1,1,30deg); /* Safari and Chrome */
-moz-transform:rotate3d(1,1,1,30deg); /* Firefox */
transform:rotate3d(1,1,1,30deg);
}
效果如下图所示：
2. rotateX(angle)，定义沿着X轴的3D旋转
rotateX(angle)表示以X轴为旋转轴旋转。
rotateX(angle)函数功能等同于rotate3d(1,0,0,angle)。
如下代码中，设置angle为40deg。
div#div2
{
-webkit-transform:rotateX(40deg); /* Safari and Chrome */
-moz-transform:rotateX(40deg); /* Firefox */
transform:rotateX(40deg);
}
效果如下图所示：
3. rotateY(angle)，定义沿着Y轴的3D 旋转
rotateY(angle)表示以Y轴为旋转轴旋转。
rotateY(angle)函数功能等同于rotate3d(0,1,0,angle)。
如下代码中，设置angle为40deg。
div#div2
{
-webkit-transform:rotateY(40deg); /* Safari and Chrome */
-moz-transform:rotateY(40deg); /* Firefox */
transform:rotateY(40deg);
}
效果如下图所示：
4. rotateZ(angle)，定义沿着Z轴的3D旋转
rotateZ(angle)表示以Z轴为旋转轴旋转。
rotateZ(angle)函数功能等同于rotate3d(0,0,1,angle)。
如下代码中，设置angle为40deg。
div#div2
{
-webkit-transform:rotateZ(40deg); /* Safari and Chrome */
-moz-transform:rotateZ(40deg); /* Firefox */
transform:rotateZ(40deg);
}
效果如下图所示：
五.scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)定义3D缩放转换
1.scale3d(x,y,z)通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。
默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。
当scale3d()中x和y值同时为1，即scale3d(1,1,z)，其效果等同于scaleZ(z)。
如下代码中，设置x值为2，y值为2，z值为1。
div#div2
{
-webkit-transform:scale3d(2,2,1); /* Safari and Chrome */
-moz-transform:scale3d(2,2,1); /* Firefox */
transform:scale3d(2,2,1);
}
效果如下图所示：
2.scaleX(x)通过设置X轴的值来定义缩放转换。
scaleX(x)使元素的宽变成原来的x倍。
如下代码中，设置scaleX( )值为2。
div#div2
{
-webkit-transform:scaleX(2); /* Safari and Chrome */
-moz-transform:scaleX(2); /* Firefox */
transform:scaleX(2);
}
效果如下图所示：
3.scaleY(y)通过设置Y轴的值来定义缩放转换。
scaleY(y)使元素的高变成原来的y倍。
如下代码中，设置scaleY( )值为2。
div#div2
{
-webkit-transform:scaleY(2); /* Safari and Chrome */
-moz-transform:scaleY(2); /* Firefox */
transform:scaleY(2);
}
效果如下图所示：
4.scaleZ(z)通过设置Z轴的值来定义缩放转换。
scaleZ( )和scale3d( )函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。
CSS3 transform变形（3D转换）的更多相关文章
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3 transform变形（2D转换）
transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平 ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- CSS3 2D、3D转换
2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE h ...
- css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
- css3 transform(变形)笔记
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...
- css3 transform 变形
在css3中,用transform可以实现文字或图像的旋转.缩放.倾斜和移动,并且该元素下的所有子元素,随着父元素一样转.缩放.倾斜和移动. transform属性 transform的属性包括:ro ...
- CSS3 3D转换——rotateX()，rotateY()，rotateZ()
CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...
随机推荐
- 2018-2019 ICPC, NEERC, Southern Subregional Contest (Online Mirror) Solution
从这里开始 题目列表 瞎扯 Problem A Find a Number Problem B Berkomnadzor Problem C Cloud Computing Problem D Gar ...
- day03变量的命名规范，常量，输出：自带换行，输入，注释，数据类型，运算符，常用字符大小关系
复习 ''' 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识别的字符, ...
- asp.net json,对象,字符串的相互转换
//object 转json格式字符串 public static string ObjectToJsonString(this object obj) { return JsonConvert.Se ...
- 浅析Tomcat、JBOSS、WebSphere、WebLogic、Apache
做任何web项目,都离不开服务器,有钱的公司用WebSphere.WebLogic,没钱公司用nginx+tomcat,不要小瞧nginx+tomcat麻雀虽小,五脏俱全. 服务器的知识,在笔试.面试 ...
- bzoj千题计划168：bzoj3513: [MUTC2013]idiots
http://www.lydsy.com/JudgeOnline/problem.php?id=3513 组成三角形的条件:a+b>c 其中,a<c,b<c 若已知 两条线段之和=i ...
- Webpack + vue 搭建
前言: 为何使用webpack? 为何相对于gulp&grunt更有优势 WebPack(前往官网)可以看做是模块打包机:直接分析项目结构,找到JavaScript模块以及其它的一些浏览器不能 ...
- 文献导读 | A Pan-Cancer Analysis of Enhancer Expression in Nearly 9000 Patient Samples
Chen, H., Li, C., Peng, X., Zhou, Z., Weinstein, J.N., Liang, H. and Cancer Genome Atlas Research Ne ...
- 关于AndroidStudio 经常弹出TortoiseSVN 同步的解决办法
我的AndroidStudio在使用时是从TortoiseSVN的文件夹下直接打开的 但是由于svn自己的特点每改一个文件就要跳出来一个svn的对话框 体验极其难受!砍人的心都有了 网上的解决办法都是 ...
- Python下探究随机数的产生原理和算法
资源下载 #本文PDF版下载 Python下探究随机数的产生原理和算法(或者单击我博客园右上角的github小标,找到lab102的W7目录下即可) #本文代码下载 几种随机数算法集合(和下文出现过的 ...
- Win10系列：C#应用控件基础11
RichEditBox控件 富文本格式是一种跨平台的文档格式,在这种格式的文档中可以编辑文本.图片.链接等内容.通过RichEditBox控件可以对富文本格式的文档进行编辑. 在XAML文件中,Ric ...