css3 2d中的2d和3d有什么区别?

2D和3D区别在哪里?_百度知道
2D和3D区别在哪里?
最近很流行3D游戏,我不是很了解多了一个D怎么就这火啊?
我有更好的答案
它能不火嘛,一个游戏主要还是要靠游戏情节才能吸引人玩的,我一直在用不闪式3d显示器,那效果啊,2D真是没法比啊,像我最近一直和朋友在玩的龙之谷就是一款很好玩的3D网游,情节丰富,游戏非常具有特点其实3D和2D的最大差别主要是在感官体验上,3D相比来说更有空间感,更让人身临其境吧
采纳率:100%
是真正视觉意义上的立体画。 立体图像技术的出现是在图像领域彩色替代黑白后又一次技术革命,座位前面会有装置向你身上泼水等等,给人一种身临其境的感受,但其影片依然是3D电影。现在外面还有所谓的6D电影,6D电影就是在环境互动上更进一步,看起来可以把整个世界任意一点的位置确定下来,需戴眼镜才能看出立体效果,是真正具有立体感、明暗对比来体现的,而真正的立体画是模拟人眼看世界的原理,增加了互动的项目,比如增加气味释放、简称二维。3D的定义
3D即三维、z轴,其中x表示左右空间,y表示上下空间,z表示前后空间,这样就形成了人的视觉立体感,三维动画就是由三维制作软件制作出来的立体动画,活灵活现,栩栩如生、左右、前后三维关系,实现再发展的趋势。4D的定义
4D就是3D根据爱因斯坦的理论就是加上了时间的概念。从而时间与空间想结合就成了所谓的4D空间。3D电影和3DS带给我们的画面是3D立体图像,不存在前后。在一张纸上的内容就可以看做成是二维,给人们以很强的视觉冲击力。它与平面图像有着本质的区别,平面图像反映了物体上下、左右二维关系,个人认为外面所谓的4D电影准确的说是环境互动3D电影,随着3D立体电影中画面的变化。3D立体游戏目前最火的是阿凡达,影院内会利用风扇刮风,椅子会活动,当画面中有海浪扑来的时候,对于玩家来说,我们看到的图像是电脑内部三维物体“投影”到显示器上的一帧帧二维画面,最终我们看到的图像其实是2D的,显示效果与电视/电影没有本质区别。  所谓三维,按大众理论来讲,只是人为规定的互相交错(垂直是一个很有特性的理解)的三个方向、栩栩如生般的立体3D。希望看完这篇文章能让你明白3DS是一部怎么样的掌机,3DS将会如何冲击人们的视觉,称之为二维动漫,利用光学折射制作出来,它可以使眼睛感观上看到物体的上下,没有立体。  二维是平面技术的一种,也可以深藏其中2D的定义  2D即二维,掌握了立体图像制作技术就是掌握了图像行业发展的金钥匙。立体图像行业是二十一世纪的黄金产业,被专家誉为“时间与金钱的摇蓝”。真正意义上的4D电影目前根本就不存在,让你在看电影时可以闻到等等、距离感的游戏,给人产生一种跃然纸上。
二维即左右、上下两个方向,以前所说的3D游戏不是真正的3D立体游戏,尽管我们玩的确实是3D游戏,但这个3D是针对电脑内部显卡渲染过程而言。普通网友分不清的游戏里的3D与3D立体。  即只有面积,那么什么是3D立体图像呢?立体图像通俗的讲就是利用人们两眼视觉差别和光学折射原理在一个平面内使人们可直接看到一幅三维立体图 ,画中事物既可以凸出于画面之外,用这个三维坐标,也是图像行业发展的未来趋势。这主要是运用光影、虚实,例如普通的平面动漫,人们看到的平面图也有立体感。原来,三维是为了确定位置。  三维既是坐标轴的三个轴,即x轴、y轴,三维是指在平面二维系中又加入了一个方向向量构成的空间系,在一个平面上的内容就是二维
补充一下吧~2D游戏适合一些上班族或者说相对空闲时间不是很长的人群玩~因为上班过程中不可能随便给你3个小时以上的空闲时间~所以2D游戏在操作上大多采用鼠标点击操作,并且它的自动寻路做的可以说是非常的“贴心”,只要点击下任务目标就几乎可以不要管了,而且一般还有挂机功能~这样又只要按一下快捷键就又可以自动打怪了。总的来说觉得2D游戏用的最多的是···鼠标~而3D游戏则完全是2D游戏的高端化、技术化。这些就不说了~1L的朋友已经说了~我再补充一点的是,也是我最近玩的这些2D游戏中体验最深的一点:2D游戏看网速,3D游戏看配置!
之所楼主这个问题提出这么久了我还来回答,一点确实是想来解释下2D和3D的区别,二是我被这个2D游戏整得来这里发泄下而已。由于在宿舍上网,网速问题把我折磨死了~动不动就没反应了,然后就是连接服务器中断···所以我在这里倡导大家,若是网速不好的话最好别玩2D游戏~否则你会疯的!不过不得不说2D游戏故事型的游戏发展情节还是挺不错的~它简单易上手、快捷方便又贴心~还是挺受一些工作之余的白领阶层人士喜爱的,不说别的,至少它玩起来非常的轻松,简简单单一只右手就能玩了,需要离开一会做事的时候,点····挂机~~~
为您推荐:
其他类似问题
您可能关注的内容
换一换
回答问题,赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS3 2D&===&3D转换 - 简书
CSS3 2D&===&3D转换
CSS3 2D 转换
CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。
CSS3 Transforms
它是如何工作?
变换的效果,让某个元素改变形状,大小和位置。
您可以转换您使用2D或3D元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意: Internet Explorer 9 要求前缀 -ms- 版本.
在本章您将了解2D变换方法:
translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
在下一章中您将了解3D转换。
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
translate() 方法
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
rotate() 方法
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
rotate值(30deg)元素顺时针旋转30度。
scale() 方法
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
skew() 方法
transform:skew(&angle& [,&angle&]);
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX(&angle&);表示只在X轴(水平方向)倾斜。
skewY(&angle&);表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
skew(30deg,20deg)元素在X轴和Y轴上倾斜20度30度。
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
利用matrix()方法旋转div元素30°
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
新转换属性
以下列出了所有的转换属性:
适用于2D或3D转换的元素
允许您更改转化元素位置
2D 转换方法
matrix(n,n,n,n,n,n)
定义 2D 转换,使用六个值的矩阵。
translate(x,y)
定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n)
定义 2D 转换,沿着 X 轴移动元素。
translateY(n)
定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y)
定义 2D 缩放转换,改变元素的宽度和高度。
定义 2D 缩放转换,改变元素的宽度。
定义 2D 缩放转换,改变元素的高度。
rotate(angle)
定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle)
定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle)
定义 2D 倾斜转换,沿着 X 轴。
skewY(angle)
定义 2D 倾斜转换,沿着 Y 轴。
CSS3 3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中,您将学到其中的一些 3D 转换方法:
点击下面的元素,来查看 2D 转换与 3D 转换之间的不同之处:
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
rotateX() 方法
rotateX()方法,围绕其在一个给定度数X轴旋转的元素。
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
rotateY() 方法
rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
下表列出了所有的转换属性:
向元素应用 2D 或 3D 转换。
允许你改变被转换元素的位置。
规定被嵌套元素如何在 3D 空间中显示。
规定 3D 元素的透视效果。
规定 3D 元素的底部位置。
定义元素在不面对屏幕时是否可见。
3D 转换方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)
定义 3D 转化。
translateX(x)
定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)
定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)
定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z)
定义 3D 缩放转换。
定义 3D 缩放转换,通过给定一个 X 轴的值。
定义 3D 缩放转换,通过给定一个 Y 轴的值。
定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)
定义 3D 旋转。
rotateX(angle)
定义沿 X 轴的 3D 旋转。
rotateY(angle)
定义沿 Y 轴的 3D 旋转。
rotateZ(angle)
定义沿 Z 轴的 3D 旋转。
perspective(n)
定义 3D 转换元素的透视视图。
今天天气好晴朗处处好风光伴随着好天气的到来心情都更加明朗了呢是不是该学点烧脑的内容了呢傻球也要出来晒晒太阳咯~ CSS3 3D transform变换 rotateX, rotateY, rotateZ和perspectiverotate旋转的意思,rotateX旋转X轴,...
请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还不错,可以去H5专题中查看更多相关文章。 CSS3高级属性 今日课程预览 1. 渐变 1.1 线性渐变 为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结...
1、属性选择器:id选择器
通过id 来选择类名选择器
通过类名来选择属性选择器
通过标签属性来选择器 CSS3中新增了两种颜色模式: CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强...
37 视频滤镜 在配置编译FFmpeg时可以通过--disable-filters来禁止所有滤镜的编译。也可以配置编译脚本来输出所有包含进编译的滤镜信息。 下面是当前可用的视频滤镜介绍。 alphaextract 把输入视频作为灰度视频来提取透明通道,它通常和alphame...
CSS3 2D转换 通过 2D 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 2D转换 tr...
随着第53届金马奖的完满落幕,马思纯和周冬雨这两个年轻的姑娘也在努力付出后得到外界认可。这个最佳女演员奖,是她们演绎事业的首个大奖,同时也会是对她们最好的激励。 获奖后的马思纯在微博发文说在台上语无伦次,感谢各位。但无中生有的挑事者,直接吐槽马思纯当天的造型太雷,得影后还不...
曾经有一段时间对生活对自己极度失望,真想如果自己大病一场多好,这样自己经历病痛的折磨好了后就会对生活热爱珍惜。 让生活把自己逼到一个绝境,希望能通过外在环境这种方式让自己快速成长,珍惜生活。 现在想想幸好这种愚蠢的想法没有实现,不然连哭都没地方。 那段时间内特别喜欢看励志成...
人在某些事情逼近的时刻就要产生一些惶恐,是可以理解的吧。
我有一个长得很秀气的老师,那就是胡老师。她的皮肤白白的,眉毛细细的,眼睛大大的,鼻子尖尖的,嘴巴红红的, 还戴着眼镜。据我所知,她的脸型应该是瓜子脸,腿长长的,长得比较瘦。她对同学们很善良,有时候也会朝我们发火。这就是我的班主任,胡老师。
践行。 最开始说的我要每天吃健康早饭和中午水煮菜,晚上不吃或者水果。因为各种原因总之就是没坚持下来。最近再考虑要不要开始健身这件事。以及到底是在剧场还是去健身房的事。 看演出视频感觉已经看上去竟然比冲哥还要宽很多很多!!!生气!!虽然是衣服是大的,但是!!!不行!!!欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!您的位置: >
transform:
&&&&&& rotate()& 旋转函数 (deg)
&&&&&& skew(X,Y) 倾斜函数 (deg)
&&&&&& scale(X,Y) 缩放函数 (正数、负数和小数)
&&&&&& translate(X,Y) 位移函数(px)
translateX()
translateY()
transform 简写执行顺序(后写先执行)
transform-style(preserve-3d) 建立3D空间
perspective 视镜
perspective- origin 视镜基点
&&&&&& x:left/center/right/length/%
&&&&&& y:top/center/bottom/length/%
transform 新增函数
translateZ()
transform-origin: x,y;旋转的基准点
&&&&&& x : left/center/right/length/%
&&&&&& y : top/center/bottom/length/%
&&&&&& z : length
&如需转载,请注明文章出处和来源网址:我要分享到:上一篇: 下一篇:没有了 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到,或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期: 13:45
原创:本文www.divcss5.com DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT DIVCSS5.com 学习与资源分享平台css3的3D和2D - 大风吹自己浪 - 博客园
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化。rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X轴负方向的旋转,视觉上呈现盒子宽度上的变化。css2D旋转:translate(a,b):a,b,均大于0时,a表示是在水平方向的位移(从左向右),b是垂直方向的位移(从上往下),rotate(a):a&0,在水平面上顺时针旋转的度数,a&0时,在水平面上逆时针旋转度数。scale(x,y):x是指盒子宽度的变化,y是指盒子高度的变化,0-1盒子缩小,&1盒子变大。skew(x,y):沿x轴翻转x度数,沿y轴翻转y度数。matrix():可以整合所有2D的转换方法,包括六个参数:a,b,c,d,e,f。transform:属于css属性,上述方法属于该属性的值。div{transform:rorate(30deg);}css3的过渡:transition: width 1s linear 2s;四个属性:要使用过渡的属性,过渡的时间,过渡的线性路线,过渡效果开始的时间。\
css3的动画:
设置定义动画 myfirst
from {background:}
to {background:}
@keyframes myfirst
{background:}
{background:}
{background:}
100% {background:}
绑定动画:div
animation: myfirst 5s;
-moz-animation: myfirst 5s;
animation: myfirst 5s linear 2常用几个属性:1,动画名称,2,动画周期时间,3,动画速度曲线,4,动画开始时间,5,播放次数,
阅读(...) 评论()

我要回帖

更多关于 css3 2d翻转动画效果 的文章

 

随机推荐