我觉得 CCS3 的 transform 中的学问很深，可以出不少面试题了，之前的文章谈到过 perspective 属性的位置问题，我们今天看看 rotate 的顺序，首先看看下面两个 CSS3 的 keyframe 动画：

两个动画的起始状态和结束状态都是是一摸一样的（其实就是原始位置），不同的只不过是 rotate 和 rotateX 的顺序。但是动画效果却有惊人的差别。

Minren 哥前面已经写了一些关于这方面的 blog 了，大家也可以在团队 blog 里面参考。

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

介于只是介绍 perspective，没有对 css 3d transform 其他部分属性介绍说明，下面是我个人对 css3 3D 的一些个人见解，大神们莫喷。那些 rotateX 啊，scaleY 啊这些大家都能够立刻明白的我就不过多的解析了。主要有几个属性大家可能比较少用或没有理解透的为这部分的主要内容。

以下两行语句有什么区别？

如果大家不清楚，请听我娓娓道来。

CCS3 中的 Transform 是设置界面样式和动画的一大利器。而且在 Chrome 和 FF 中还支持 3D 变换。IE9 不支持，IE10 支持。

CSS3 绘制腾讯 QQ 的企鹅 Logo 效果

今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。

一、如何使用 CSS3 来绘制图形？

网络上经常能够看到一些用 CSS3 绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形, 梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制方法了。

 添加 CSS

通常情况 CSS 不论是内嵌还是外联，都是预先定义好的。其实利用 JavaScript，我们也可以动态在页面中插入或删除 CSS。

比较常见的场景是：CSS 动画。由于我们在设计网页时不能预知动画的具体细节，所以需要在运行时进行定制。比如，我们想让一个元素从右侧飞出屏幕，如果用 keyframe 动画实现，我们必须知道屏幕的宽度，这个信息只有在运行才知道。
例如下面的 1026px，是运行时浏览器窗口的宽度。

话说昨天在写在线素描的时候，想着给画布加上些网格，就跟 PS 里面的一样。但是用 canvas 画是不行的（注：不是它不行……），图片又让我不齿，就作罢了。

这个方法其实已经使用很久了，之前主要在嵌入式 WebQQ 等产品中用过，现在拿出来分享一下吧，是目前最简洁的方式来实现 ie6 的 position:fixed; 失效 bug，以及的其他方法的闪动问题，CSS 代码如下，很简单，自行修改调试即可：

Like in the previous article, you’ll find a video as well as the source code to download at the end of the article.

This article is the second part of this one: Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by usingExpression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article.

你是否遇到过这样的情景：

1、用 gif 格式的 loading 菊花会有背景颜色，与页面背景格格不入
2、于是，设计师给你一帧一帧变化的透明 png 合图，你能想到的就是用 JS 来控制
3、最终，你会发现用 JS 控制的 loading 菊花，对网页性能有一定的影响

        好在现在，这个 HTML5 到来的时代，如果你不用考虑浏览器兼容问题，你就可以用 CSS3 轻轻松松实现透明 loading 菊花的加载效果，下面的Step By Step 会让你茅塞顿开：