搜索
首页web前端html教程初识CSS3 3D效果,浅谈理解_html/css_WEB-ITnose

刚接触完css3的3D变换,感觉确实十分华丽,趁着热乎劲,把感想和理解记录下来。如有不对,欢迎指正。

CSS3中提供了2D和3D两种变换方式,所谓的变换主要就是位移和旋转,2D和3D的区别大概就是有没有Z轴方向的变换,仅此而已。

所以,为了后面更好的理解3D变换,我们先说一说2D的变换。

translate()和rotate()

上面两种方法是2D变换的常用方法,一个对应位移,一个对应旋转,当然还有其他的,这里就不展开,先只说说这两个。具体语法是这样的,比如我们想变换一个div。

#div1{transform:translate(100px,100px);}
#div2{transform:rotate(50deg);}

transform是css3提供的一个属性,专门用于图形变换,这个属性现在可能得到了大部分浏览器的支持,但3D效果用到的后面几种属性,还是需要做兼容,为了节省时间,讨论技术本身,后面就不照顾兼容了。

言归正传,上面两个方法光从参数也很容易理解,translate()是位移方法,分别朝x轴方向,y轴方向移动一段距离,距离可以为负。rotate()是旋转方法,会绕原点顺时针旋转一个角度。那么问题来了,原点在哪?既然是变换,必须得有参考系,这才有准确的变换效果,所以,无论2D还是3D,找准坐标系,找准坐标系,找准坐标系。因为很重要,所以说三遍。

一般来说,原点默认为元素中心点,当然这个原点也是可以调整的,通过这个属性 transform-origin:50% 50%; 这里的50% 50%表示的就是中心默认的位置,可以改成其他的,比如说左上角就应该写成 tansform-origin:0% 0%;  这样就可以调整原点了。

transform属性

了解完2D,进阶一下,transform属性同样可以进行3D变换,简单来说就是分别针对x,y,z进行设置。

#div1{

  transform:translateX(100px) translateY(100px) translateZ(100px) rotateX(30deg) rotateY(30deg) rotateZ(30deg);

}

旋转部分,需要特别说明一下,rotateX()表示绕X轴旋转的角度,这个变换,整个坐标系会跟着一起旋转,所以找不到原点得是多糟糕的事情,坐标系永远是跟随我们的元素的,每个元素都有自己的坐标,以初始状态来说,原点在元素中心,x轴正方向从原点水平向右,y轴正方向从原点竖直向下,z轴正方向则是从原点朝向我们的屏幕,也就是说,我们的元素正对的方向就是它自己的z轴方向,这一点千万要记好。

因为transform归根结底只是个属性,所以重复的transform只会覆盖,缩写形式就是上面这种,需要注意的是中间用空格隔开而不是逗号。另外,个人理解,transform从中文上来说,应该是“变换成”,而不是“变换”,它表现的是变换完成之后的样子。

透镜,模拟出来的3D效果

完成了上面的变换,有3D效果了么,我们看个demo。

这里还没有进行变换,接下来我们加入变换的属性。

我们发现,它确实变形了,但是,和我们想象中的3D效果相差甚远,甚至可以说完全是一个平面效果啊。

其实css3的3D效果,是靠浏览器通过计算,渲染,最后模拟出来的一个三维效果。如果要模拟的像,可以欺骗人的眼睛,那必须要考虑一个东西,就是透视,或者说景深,再通俗点就是近大远小。只有满足这个,css3的3D变换才有3D的效果,不然即使确实进行了3D变换,浏览器也会把它投影成一个平面的,完全没有3D效果。那怎么给它增加一个透视或者说景深呢,很简单,一个属性就可以搞定。

perspective:500;

perspective属性就是所谓的透镜属性,后面的数字单位是像素,用来模拟视角离元素的距离,给最外围的元素设定好这个属性,里面的元素在景深方向有所变换时,就能准确表现出近大远小。

我们来试一下。

OK,完美,一个平面的元素,现在获得了3D的变换效果,通过几个div的不同的旋转变换,和位移,我们很容易就组合出一个正方体,这里的话要注意坐标系会跟着元素一起动的,不过它的Z轴方向一定是div正面朝向的位置,为什么一定要强调正面,是因为3D变换可以让他旋转180度,它的背面可以被我们看到,这个时候,Z轴方向就相反了。而正面,就是我们可以放内容的那个面。

透镜,舞台,组合体

如果我们组合出了一个立方体,想要它动起来,该怎么做?“立方体”是由6个div拼成,每个又有自己独立的坐标系,通过统筹他们协作变换完成这个效果,想想都让人觉得不可能。那有没有简单的方法,有,给组合体外面套一个div,我们只要旋转变换它,里面的子元素,自然也跟着旋转了。所以,在我的理解里,组合体就是一个不能运动的死物,想要动效的话,就得给它们一个“舞台”,我们通过操作舞台,就可以全方位展示,运动我们的组合体。所以我们获得了一个三层结构,最外层的透镜,里面的舞台,和舞台里的组合体。在一些大牛的博客里,可能更倾向于把它们叫做“镜头”,“空间”和“物体”。这个就是实现3D效果的基础。

最后一点东西,“保留3D位置”

我最后完成了一个立方体,并用一个div作为舞台包裹了它,想通过旋转舞台,看看其他角度的立方体,结果出现了这个情况。

立方体变成了一个平面了!为什么会这样?其实细想一下也很容易理解,div本来就是一个平面元素,所以立方体直接被它“压扁”了。舞台空间不够,也就装不下我们的展示物,所以我们要给舞台扩容,给它添加一个属性就可以解决这个问题。

transform-style:preserve-3d;

这个属性的意思是,给子元素保留3D位置,如果你不设定,那就默认不保留,也就是子元素都以平面显示。

添加完这个属性我们来看一下。

OK,立方体就出来了。

 

以上就是我对最基础3D效果的理解,3D效果当然不可能全都这么简单,有一些东西我没有涉及,比如perspective-origin,体会不深不敢妄谈,而且许多3D技巧我还没有掌握,后面如果再有所体会,一定分享经验。

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。