CSS3中2D转换学习需知
本文属于入门级博文,大神可以自行屏蔽~
首先,关于CSS3的2D3D转换的学习很有必要,因为可以利用这项技术轻松做出比较复杂的动画效果,那么,我们就从w3school的教学课程入手开始学习吧!先试试最简单的translate
.div2{transform:translate(100px,100px);}
兴高采烈地去看浏览器,发现谷歌浏览器没有任何变化,这是为什么呢?这就需要我们这些马大哈人士,注意一段文字了:
其实,每一个CSS3都会有官方对于浏览器支持的介绍,哪一个需要前缀,哪一个不需要前缀。记这个确实很麻烦,而且有的时候随着浏览器的更新可能也会发生一些变化。比较稳妥的方法就是给每一个都加上前缀:
.div2{transform:translate(100px,100px);-webkit-transform:translate(100px,100px);-ms-transform:translate(100px,100px);-o-transform:translate(100px,100px);-moz-transform:translate(100px,100px);}
这里,webkit适配Chrome Safari,ms适配IE,o适配Opera,moz适配Mozilla Firefox,后面的三个都比较好记忆:
Opera浏览器,是一款挪威OperaSoftware ASA公司制作的,所以取一个开头字母,很合适。
ms很直白:Microsoft 微软嘛
Mozilla:开发firefox的组织名。
这个webkit是个啥呢?
WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox等使用)和Trident(也称MSHTML,IE使用)。
详参:WebKit百度百科
当我们了解到每一个浏览器基本上都有对应的前缀之后,我们确实可以给不同浏览器设置不同的显示风格。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。