css3

时间:2019-03-18
本文章向大家介绍css3,主要包括css3使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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%;  这样就可以调整原点了。