CSS3的2D变形和3D变形

发布日期:2015-09-10 15:14:01

北京网站建设中的CSS3的2D变形和3D变形。虽然两个英文单词发音相似,但 CSS变形(transformation,包括 2D变形和 3D变形)和
CSS 过渡(transitions)完全不同。可以这样理解:过渡元素从一种状态平滑转换到另一
种状态,而变形则定义了元素将会变成什么样子。我自己(极其幼稚)的理解是这样的:
想象一下《变形金刚》里的擎天柱,他先变形(transform)为别的东西,经过一段时间的过渡(transition)又变成了卡车。
可能刚才的这个比喻把你搞得更晕了(或者你根本不知道擎天柱是谁) ,还是直接说正题
吧。我们来给 AND THE WINNER ISN'T 网站的导航链接在悬停时添加一个 2D变形:
nav ul li a:hover {
transform: scale(1.7);
}
在现代浏览器中,在导航链接上悬停鼠标就会看到如下效果:

CSS3的2D变形和3D变形

我们告知浏览器当鼠标悬停在链接上时,将其放大到原始大小的 1.7倍。
现在如果你尝试在 Safari 浏览器中添加这种规则,须注意它需要应用该规则的原始元素
必须以块状显示。示例如下:
nav ul li a {
height: 42px;
text-decoration: none;
text-transform: uppercase;
color: black;
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1.0);
font: 1.875em/42px 'BebasNeueRegular';
display: block;
}
不这样做的话,什么效果都没有,你懂的,垃圾得很。


相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计