不明白transform-style, 麻烦老师举例说明一下。

不明白transform-style, 麻烦老师举例说明一下。

视频上对这个属性的定义有点难懂,MDN上的含义是说让子元素能够处于3D空间,但是实际测试的时候好像没有设置这个属性,子元素还是可以进行3D转换, 请问我理解错了嘛? 

能不能举例说明一下设置属性前后的区别还有原理? orz

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,给一个元素设置transform-style: preserve-3d;就是让它里面的元素在它这个空间里面呈现3d效果,默认没有3d效果的。举例如下:

http://img1.sycdn.imooc.com//climg/5e009f5e098fc0e504740517.jpg

没有3d效果:

http://img1.sycdn.imooc.com//climg/5e009f6c091bc9e802980280.jpg

给div1设置如下属性

http://img1.sycdn.imooc.com//climg/5e009f840999a67003610050.jpg

会看到有一个穿插效果,此时就呈现了一个3d效果:

http://img1.sycdn.imooc.com//climg/5e009f910947dfd603460283.jpg

另外,这个属性在实际开发中用不到,简单的了解即可。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 慕移动3569406 提问者 #1
    嗯嗯 , 所以区别是有穿插的效果是吗 ? 对了, 后面的CSS3项目会用到这个技术吗?
    2019-12-23 19:14:07
  • 好帮手慕夭夭 回复 提问者 慕移动3569406 #2
    是的,因为呈现了3d空间,所以有了穿插的效果。后面没有用到,这个实际开发中也用不到,作为课外了解就行。
    2019-12-24 09:43:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师