如何在CSS中应用多个转换？
使用CSS，我怎样才能应用多个transform ？
例如：在下面，只应用翻译，而不是旋转。
li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }
你必须把它们放在这样的一行上：
li:nth-child(2) { transform: rotate(15deg) translate(-20px,0px); }
当你有多个转换指令时，只有最后一个将被应用。 这就像任何其他的CSS属性。
我添加这个答案不是因为它可能有帮助，而只是因为它是真的。
除了使用现有的答案解释如何通过链接进行多个翻译，您还可以自己构build4x4matrix
我从我发现的一些随机站点抓取下面的图片， 同时显示旋转matrix的search结果：
围绕x轴旋转： 
围绕y轴旋转： 
围绕z轴旋转： 
我找不到一个很好的翻译范例，所以假设我记得/理解了，翻译：
[1 0 0 0] [0 1 0 0] [0 0 1 0] [xyz 1]
有关转换的更多信息，请参阅维基百科文章以及Pragamatic CSS3教程 。 我发现的解释任意旋转matrix的另一个指南是Egon Rath关于matrix的笔记
matrix乘法当然是在这些4×4matrix之间起作用的，所以要执行一个旋转，然后进行平移，就要制作合适的旋转matrix并将其乘以平移matrix。
这可以给你更多的自由，让它变得恰到好处，也让任何人都无法理解它在做什么，包括你在五分钟之内。
但是，你知道，它的作品。
编辑：我只是意识到，我错过了提到可能是最重要和实际的使用，这是通过JavaScript增量创build复杂的3D转换，其中事情会更有意义。
您也可以使用额外的标记层来应用多个转换，例如：
<h3 class="rotated-heading"> <span class="scaled-up">Hey!</span> </h3> <style type="text/css"> .rotated-heading { transform: rotate(10deg); } .scaled-up { transform: scale(1.5); } </style>
当使用Javascript转换元素时，这可能非常有用。
您可以应用多个这样的转换：
li:nth-of-type(2){ transform : translate(-20px, 0px) rotate(15deg); }
一个简单的方法来应用多个变换是这样的
li:nth-of-type(2){ transform : translate(-20px, 0px) rotate(15deg); }
但也不要忘记，你需要添加前缀，让它在所有的浏览器中像safari一样的浏览器，IE不支持不带前缀的转换属性。
li:nth-of-type(2){ transform : translate(-20px, 0px) rotate(15deg); -moz-transform : translate(-20px, 0px) rotate(15deg); -webkit-transform : translate(-20px, 0px) rotate(15deg); -o-transform : translate(-20px, 0px) rotate(15deg); -ms-transform : translate(-20px, 0px) rotate(15deg); }
例如
-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0;
我正在使用enjoycss工具
http://enjoycss.com/5C#transform
它使用GUI生成所需的变换参数的css代码以生成转换代码;）
