热门关键字:
jquery > jquery教程 > css3 > CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧

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

287
作者:管理员
发布时间:2020/5/20 10:34:26
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1686
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。
它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡)与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。
以上所说到的特性在这个专题中都不会说到!
那这个专题说什么?
我们来说说CSS3 3D的一些知识点。
熟悉CSS3的都知道,transform的值可以为旋转rotate(X,Y,Z),缩放scale(X,Y,Z),平移translate(X,Y,Z)和斜切skew(X,Y)这些都很基础,不多赘述。
稍等深入一点,transform后面可以跟多个属性值。
平移和缩放
我们来看下对比效果:
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
可以看到,我对两个红色的div在hover的时候分别设置了
平移100px和同时缩放到原来的1/4,两个div的设置顺序不一要,直接导致了最终的结果的巨大差异。
下面来划重点:transform执行顺序!!!
transform 后面如果有多个属性值的话,那么后设置的属性要先执行
也就是说第一个红色的div先缩小到原来的1/4,然后再平移100px,得到最终的效果。
第二次黄色的div是先平移了100px然后再缩放到原来的1/4,注意:这平移过后再缩放会将平移的值也跟着缩放,所以黄色的小方块的最终平移要比小红块小。
平移和旋转
看效果:
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
我对两个方块分别设置了:
这是怎么回事?效果怎么反过来了?
我们知道,dom元素的旋转它是有一个旋转基点的(围绕哪个点旋转)默认的都是在dom元素的正中间
按照上面的分析,后写的先执行,我们来分析下
第一个小红块。先围绕自身的中心点旋转180度,然后向右平移100px,这个比较容易接受。
再来看小黄块。它是先向右平移了100px,然后旋转了180度。但是却向左平移了。好像与我们的预期不一样。
接下来我来解释一下原因:
这是因为transform的平移不会影响原来的旋转基点的位置?什么意思呢?当我先向右平移了100px后,我的旋转基点还在原来的位置,也就是在我们的黄色方块的左侧。然后我们再去做旋转的时候,是以之前左侧的点进行旋转的。所以旋转180度之后就绕到了旋转基点的左侧去了。
我拿gif来模拟一下这个过程吧。
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
一图胜千言
综上所述,我们可以得到两个结论:
第二点很重要,后面我们在制作复杂的3D的时候会用到这两个特性。
补充一句:如果想对旋转基点进行改变的话可以通过transform-origin:x ,y来设置 。具体细节我就不过多展开了。
下一知识点:
要想dom在三维空间中变换,那么景深肯定是逃不过的话题。前面我在我的《前端图形学》的系列文章中有说到景深和相机的概念,那么应用到CSS3中依然实用。
我们可以把景深看作是我们的眼睛或者threejs中的透视相机,其特点就是近大远小。
比如我设置 perspective:300px;那么表示的是,我离屏幕300px的位置去观察dom元素。假如设置成500px,那么肯定要比300px的物体要显示的小。
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
举个栗子:
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
CSS3专题(一)—如果没搞清楚这些特性,那你怕是学了个假CSS3D吧
我们在父容器hover的时候,让里面的小盒子绕X轴翻转360deg,并且在父容器中设置了景深的样式为:800px
当我们再沿X轴旋转的时候,立体的感觉就出来了,这个应该比较简单了,这也是后面我们做复杂3D的基础。
今天的基础内容就到这了,下一章节我们来实现复杂的3D几何体。敬请期待。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:CSS3
友荐云推荐