CSS3中2D转换学习需知

发布时间：2020-08-03 02:55:05 阅读：471 作者：吕云凡栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

首先，关于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百度百科

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

CSS3中2D转换学习需知

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签