Transform

关于firefox浏览器14.0.0升级

firefox浏览器从14.0.0升级后,css3会出现一些变化,导致一些原本正常运行的实例,突然变成乱起八糟的,很是揪心啊。

到目前为止,影响我的有两个,第一个是transform里面的skew属性,以前是可以这么写的-moz-transform:skew(10deg,5deg);10deg表示x轴方向,5deg表示y轴方向,现在从firefox14.0.0开始已经不可以了,得写成skewX或skewY,分别表示x轴,y轴。所以现在应该是这么写-moz-transform:skewX(10deg) skewY(5deg);

另一个的是关于行内元素的动画部分,你可以访问css解决方案的首页,右上角有片叶子形状的w3cplus,如果你用firebug加上display:inline-block;就会发现它原来是可以运动的,原先设计的时候本来就是可以运动的,只是火狐升级后,对于这个行内样式的动画不动了,而谷歌浏览器以前也没有运动的迹象,现在如果你加入display:inline-block;会发现原来也可以动,这个不清楚什么原因,难道是行内元素的动画有问题?望高手可以解释一二。

CSS3和jQuery制作翻转表单

CSS3中的Transform应用可以说比较广泛了,但其中的3D Transforms去年就听说了,但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回,效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

CSS3 Transform

前面我们一起学习了CSS3中的渐变圆角阴影等几个属性的使用,今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform)

页面

返回顶部