Transform

细说百度图片栏目——图片展示效果

今天写个DEMO效果时,无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢?如果是的话,那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一,他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想,仅供参考,因为我就是一个CSS3的爱好者,今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

关于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)

页面

返回顶部