怎么感觉2D和3D实现的效果差不多呀

怎么感觉2D和3D实现的效果差不多呀也没有案例啥的

源自：CSS3转换 3-4 translate3d

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-04-09 18:52:03

同学你好，

目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。 perspective通过透视产生的3D效果，只是视觉呈现而已，并不是真正的3d立体的盒子；就是远小近大的效果
透视是设置在父元素中然后作用在所有设置了translateZ属性的子元素上
translateZ 必须添加透视才能看到效果
transform-style: preserve-3d这个属性必须设置在父元素身上并且父元素有转换(就是有变形)并且子元素也得有转换(变形)才能看得到效果

如果帮助到了你，欢迎采纳

祝学习愉快~~~

尤尼酱提问者 #1

这个属性IE不支持吗

2019-04-09 18:53:53
好帮手慕慕子回复提问者尤尼酱 #2

目前IE11(包括IE11)，对perspective 这个属性支持不好。 Edge12版本及以上版本支perspective 这个属性

2019-04-09 19:01:08
尤尼酱提问者回复好帮手慕慕子 #3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3-1作业</title> <style> div { font-size: 14px; font-weight: bold; line-height: 50px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 50px; margin: auto; cursor: pointer; text-align: center; background: #abcdef; /*此处写代码*/ transition:all 1s; } /*此处写代码*/ div:hover{ font-size:16px; width:400px; height:100px; line-height:100px; transform:rotate(360deg); } </style> </head> <body> <div>www.imooc.com</div> </body> </html> 老师那这个transiton案例帮忙检查下

2019-04-09 19:05:43

好帮手慕慕子 2019-04-09 18:15:24

同学你好， 2D和3D在x和y轴上操作一样，唯一的区别是，3D转换可以在Z轴上操作元素。目前这阶段，老师介绍css3转换的相关属性. 让同学对这个新属性有一个认识的过程。

后面的课程我们会学习perspetive 以及perspetive-origin属性，用在场景样式上，场景有了透视元素就能做3D特效了。

习题类型涉及的选择题，相信同学如果能将这些题目中涉及到的知识点融会贯通，一定会受益匪浅

如果帮助到了你，欢迎采纳

祝学习愉快~~~

提问者尤尼酱 #1

已经学完这章了目前我的疑问就是没有搞懂以下几点: perspective和transform-style:preserve-3d;配合在一起使用的区别 rotateZ不加perspective：number和加了perspective：number的视觉效果一样 translateZ不加perspective就没有效果这些都是用:hover来测试的

2019-04-09 18:20:21