CSS3专题(一)如果没搞清楚这些特性,那你怕是学了个假CSS3D吧



 







 





CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。



它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡)与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。




以上所说到的特性在这个专题中都不会说到!



那这个专题说什么?



我们来说说CSS3 3D的一些知识点。



重新认识transform



熟悉CSS3的都知道,transform的值可以为旋转rotate(X,Y,Z),缩放scale(X,Y,Z),平移translate(X,Y,Z)和斜切skew(X,Y)这些都很基础,不多赘述。



稍等深入一点,transform后面可以跟多个属性值。



平移和缩放



我们来看下对比效果:





 




可以看到,我对两个红色的div在hover的时候分别设置了



transform:translateX(100px) scale(.4)

transform: scale(.4) translateX(100px);


平移100px和同时缩放到原来的1/4,两个div的设置顺序不一要,直接导致了最终的结果的巨大差异。



下面来划重点:transform执行顺序!!!




transform 后面如果有多个属性值的话,那么后设置的属性要先执行



也就是说第一个红色的div先缩小到原来的1/4,然后再平移100px,得到最终的效果。



第二次黄色的div是先平移了100px然后再缩放到原来的1/4,注意:这平移过后再缩放会将平移的值也跟着缩放,所以黄色的小方块的最终平移要比小红块小。




平移和旋转



看效果:





 




我对两个方块分别设置了:



transform:translateX(100px) rotate(180deg)

transform: rotate(180deg) translateX(100px);


这是怎么回事?效果怎么反过来了?



我们知道,dom元素的旋转它是有一个旋转基点的(围绕哪个点旋转)默认的都是在dom元素的正中间



按照上面的分析,后写的先执行,我们来分析下



第一个小红块。先围绕自身的中心点旋转180度,然后向右平移100px,这个比较容易接受。



再来看小黄块。它是先向右平移了100px,然后旋转了180度。但是却向左平移了。好像与我们的预期不一样。



接下来我来解释一下原因:



这是因为transform的平移不会影响原来的旋转基点的位置?什么意思呢?当我先向右平移了100px后,我的旋转基点还在原来的位置,也就是在我们的黄色方块的左侧。然后我们再去做旋转的时候,是以之前左侧的点进行旋转的。所以旋转180度之后就绕到了旋转基点的左侧去了。



我拿gif来模拟一下这个过程吧。





一图胜千言




综上所述,我们可以得到两个结论:




  1. transform设置多个值时候的执行顺序是:从后往前依次先执行


  2. transform的translate属性不会影响元素的旋转基点。



第二点很重要,后面我们在制作复杂的3D的时候会用到这两个特性。




补充一句:如果想对旋转基点进行改变的话可以通过transform-origin:x ,y来设置 。具体细节我就不过多展开了。




下一知识点:



景深 perspective



要想dom在三维空间中变换,那么景深肯定是逃不过的话题。前面我在我的《前端图形学》的系列文章中有说到景深和相机的概念,那么应用到CSS3中依然实用。



我们可以把景深看作是我们的眼睛或者threejs中的透视相机,其特点就是近大远小。



比如我设置 perspective:300px;那么表示的是,我离屏幕300px的位置去观察dom元素。假如设置成500px,那么肯定要比300px的物体要显示的小。





举个栗子:






 




<div class='container'>
<div id='box'></div>
</div>




 




我们在父容器hover的时候,让里面的小盒子绕X轴翻转360deg,并且在父容器中设置了景深的样式为:800px



当我们再沿X轴旋转的时候,立体的感觉就出来了,这个应该比较简单了,这也是后面我们做复杂3D的基础。





总结:




  1. transform的两大特性:执行顺序为后写先执行。平移不会影响元素的旋转基点


  2. 景深的基本概念以及基本特点。



今天的基础内容就到这了,下一章节我们来实现复杂的3D几何体。敬请期待。





 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
安徽中源管业有限公司|安徽中源管业有限公司,安徽中源管业有限公司介绍,安徽中源管业有限公司电话,安徽中源管业有限公司地址,安徽中源管业有限公司厂家,安徽中源管业有限公司电力管,安徽中源管业有限公司管材
安徽中源管业有限公司
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
弥勒综合高中|弥勒综合高中
弥勒综合高中
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部