关于2D、3D的转换

一、转换

1、转换的定义:

1,可以改变元素的形状,位置,尺寸。

2,转换分两种:

2D转换:元素只能在X轴和 Y轴平面上发生变化。改变形状、尺寸和位置。

例子:平移(move),倾斜(skew),旋转(rotate)缩放(scale)

3D转换:空间转换

3、转换的属性:

1>,transform 属性(2D转换,3D转换);

  • 常见的值:、none( 默认值,不进行任何转换)

、transform-function;(转换函数)

、转换函数:平移、旋转、倾斜、 缩放。

写法:【1】旋转:transform:rotate(45deg);

角度可以是正值:顺时针旋转,也可以是负值:逆时针旋转

【2】缩放:transform:scale(X,Y)/(0~1),1~,scaleY(y),scaleX(x);

总计:0~1:表示缩小,大于1表示放大

【3】倾斜skew:skew(angle);

【4】translate(x,y);

4 transform-origin的属性:

<1>默认情况:变形的原点是我们元素的中心点;

<2>写法:transform-origin:(x,y)/关键字(right top bottom);%;

5、2D转换

<1>transform-style:

2D Transform Functions:

matrix():以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate():指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translatex():指定对象X轴(水平方向)的平移

translatey():指定对象Y轴(垂直方向)的平移

rotate():指定对象的2D rotation(2D旋转),需先有 <‘ transform-origin ‘> 属性的定义

scale():指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scalex():指定对象X轴的(水平方向)缩放

scaley():指定对象Y轴的(垂直方向)缩放

skew():指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewx():指定对象X轴的(水平方向)扭曲

skewy():指定对象Y轴的(垂直方向)扭曲

3D Transform Functions:

matrix3d():以一个4x4矩阵的形式指定一个3D变换

translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

translatez():指定对象Z轴的平移

rotate3d():指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略

rotatex():指定对象在x轴上的旋转角度

rotatey():指定对象在y轴上的旋转角度

rotatez():指定对象在z轴上的旋转角度

scale3d():指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略

scalez():指定对象的z轴缩放

perspective():指定透视距离

时间: 2024-08-07 10:06:46

关于2D、3D的转换的相关文章

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)

opengl中场景变换|2D与3D互转换(转)

opengl中场景变换|2D与3D互转换 我们生活在一个三维的世界——如果要观察一个物体,我们可以: 1.从不同的位置去观察它.(视图变换) 2.移动或者旋转它,当然了,如果它只是计算机里面的物体,我们还可以放大或缩小它.(模型变换) 3.如果把物体画下来,我们可以选择:是否需要一种“近大远小”的透视效果.另外,我们可能只希望看到物体的一部分,而不是全部(剪裁).(投影变换) 4.我们可能希望把整个看到的图形画下来,但它只占据纸张的一部分,而不是全部.(视口变换) 这些,都可以在OpenGL中实

cad动态的2D/3D图形控件VectorDraw Developer Framework (VDF)

VectorDraw Developer Framework (VDF)为您的应用程序增加动态的2D/3D图形.是一个可轻松创建爱你和管理及打印2D和3D图形的构件. 其对象可显示与大多数公共矢量格式和其他CAD对象兼容的方法和属性. 支持10多种矢量格式和多种离散格式.VectorDraw Developer Framework (VDF) 是完全基于对象的和支持 .NET 2的. 此构件是用.NET 2005 C# 代码写成的. 同时还提供了一个ActiveX组件. 此ActiveX组件为旧

DirectUI 2D/3D 界面库集合 分析之总结

DirectUI优点在于能够非常方便的构建高效,绚丽的,非常易于扩展的界面.作者是Bjarke Viksoe, 他的这个界面程序思想和代码都很优秀,他的代码主要表述了他的思想,尽管bug比較多,可是很合适学习. DirctUI在不断的完好,有各种各样的3d界面库出来来了,可是,是它在我懵懂时给了我编程的思想,让我踏上了编程之路,以下,我把我搜集的界面库以及重构的界面库都贴出来,大家技术交流交流. 当中下载包中有: Duilib 开发文档.帮助文档以及分析说明文档 diablo_trunk(UI)

关于CSS3转换2D,3D过渡与动画方法

总结: 观察者远近 perspective:指定距离,必须带像素单位px[ 观察者视角 perspective-origin:一般默认居中即可 ] 转换 transform 包含:rotate,translate,scale,matrix,perspective 子元素3D效果 transform-style : preserve-3d | flat [ 对象transform-origin一般默认居中即可 ] [ 元素背面 backface-visibility:一般默认可见即可 ] 元素旋转

OpenGL超级宝典总结(二)2D/3D笛卡尔坐标、坐标裁剪、纹理坐标、MVP转换等概念

如果你想把图形渲染在正确的位置上,那么坐标的设置就很重要了.在OpenGL中,与坐标相关的主要有笛卡尔坐标.坐标裁剪.纹理坐标.MVP(Model View Projection)转换. 1.笛卡尔坐标 在二维绘图中,笛卡尔坐标有一个X轴和一个Y轴组成,X轴为水平方向,Y轴为垂直方向,X和Y相互垂直.如图1.关于正负方向问题,默认如图1上标示,但是我们可以根据实际需求自己定义.(左下角为(0, 0)原点) 图1: 在三维绘图中,笛卡尔坐标多了一个Z轴,Z轴同时垂直于X和Y轴.Z轴的实际意义代表着

2d/3d转换

transform translate 移动 translate(10px,100px)要配合过渡或动画才有意义 transition-delay()过渡延迟时间 transition-timing-function:线性过度 transition-property:all;元素参与的属性,all表示全部 rotate 顺时针旋转 负数是逆时针 rotate(45deg) scale 放大缩小  transform: scale(1,1); x轴 y轴 放大缩小比例 matrix()[组合操作]

CSS3基础 02(2D /3D)

一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translate() 参数说明: (1)只有一个值的情况下,表示水平方向运动,正值向右,负值向左,也可以接受百分比,百分比参照的是自身的宽,高 (2)两个值分别控制水平和垂直 (3)移动不会影响其他的元素,类似于相对定位 (4)我们可以通过盒子的绝对定位配合transform:translate(-50%,-50

css3 2D 3D 过渡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>css3动画</title> </head> <style> .xuanzhuan{ width: 100px; height: 80px; background: red; transform:rotate(10deg); /*旋转:rotate() 参数为(0-360d