我一直喜欢3D。我也开始使用CSS 3D Transform，而且浏览器对它的支持度越来越好。但给我的感觉，使用Transform就是用来创建2D图形，并且使用旋转和位移可以创建一些3D图形。但在实际使用的时候，还是越到了不少的麻烦，而且这些麻烦出乎我的意料。我想或许大家也同样遇到过这样的问题，为了大家在使用CSS 3D Transform能避免这些麻烦，我把我碰到的与在大家分享一下。

本教程的灵感来自于Envato的最新版本。这个页面的主页功能是展示一系列创意产品(字体、图标、图片模板等等)，而且其布局采用了一个整洁的Isometric网格布局。

同HTML元素一样，我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先，IE不支持SVG元素的CSS transform属性，但是如果只是应用一些2D变换，为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。

z-index和transform是CSS中的属性，但很少同学将二者联系到一起，感觉他们八杆子打不上。事实真的是这样吗？如果你也不能确认，这篇文章就值得你花点时间阅读。因为阅读完了，你会有所收获的。

你喜欢挑战么？你愿意承担一项以前从没遇到过的任务并且按时完成么？如果在进行任务中，你碰到来一个似乎无法解决的问题呢？我想分享我使用CSS 3D效果的经历，那是第一次用于实际项目中，以此来激励你接受挑战。那是平常的一天，当Eugene（ CreativePeople的经理）写信给我的时候。他寄给我一个视频，说他正在为一个新项目开发一个概念，而且想知道我是否可能开发一个像视频里那样的东西。这是一个绕着一个轴旋转的3D物体（准确地说是个立方体）。对于用CSS 3D工作我已经有一些经验了，于是我的脑海里开始形成一个解决方案。我Google搜索了像“CSS 3D cube”这样的关键词来确认我的想法，随后我回复Eugene说我可以。

早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识，最近重新整理了一个Transform系列的文章，希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《CSS3 2D Transform》。今天是这个系列的最后一篇——CSS3 3D Transform。

在一个二维或三维空间，元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴，也就是大家常说的水平轴和垂直轴；而3D变形工作在X轴和Y轴之外，还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度，还有深度。我们将首先讨论元素在2D平面如何变换，然后我们在进入3D变换的讨论。CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的属性的使用，其实在属性中，属性仅是其中之一，要彻底理解属性，这是不够的，必须的理解其他属性的应用。今天将和大家一起探讨中和相关属性的使用。

在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。在2011年05月在站上发表了第一篇有关于CSS3 Transform教程，现已时隔近两年，有很多东西都有变化，而且理解也略有不同，接下来将会分几篇教程，向大家介绍CSS3 Transform相关的知识。

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