CSS3中2D转换学习需知-创新互联

本文属于入门级博文,大神可以自行屏蔽~

站在用户的角度思考问题,与客户深入沟通,找到西藏网站设计与西藏网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、网页空间、企业邮箱。业务覆盖西藏地区。

首先,关于CSS3的2D3D转换的学习很有必要,因为可以利用这项技术轻松做出比较复杂的动画效果,那么,我们就从w3school的教学课程入手开始学习吧!先试试最简单的translate

.div2{
	transform: translate(100px,100px);
}

兴高采烈地去看浏览器,发现谷歌浏览器没有任何变化,这是为什么呢?这就需要我们这些马大哈人士,注意一段文字了:

CSS3中2D转换学习需知

其实,每一个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浏览器,是一款挪威Opera Software ASA公司制作的,所以取一个开头字母,很合适。

ms很直白:Microsoft 微软嘛

Mozilla:开发firefox的组织名。

这个webkit是个啥呢?

WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用)。

详参:WebKit百度百科

当我们了解到每一个浏览器基本上都有对应的前缀之后,我们确实可以给不同浏览器设置不同的显示风格。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:CSS3中2D转换学习需知-创新互联
链接分享:http://pwwzsj.com/article/ghjeg.html