Html 如何执行多个二维变换？

我想允许一个

div

元素同时进行多个变换（旋转、平移等）

我似乎无法做到这一点，因为只应用了一个转换（第一个），使用以下代码：

div{
宽度：100px；
高度：75px；
背景色：#FFCC00；
边框：1px纯黑；
}
分区#分区2{
变换：旋转（45度）；
-ms变换：旋转（45度）；/*IE 9*/
-moz变换：旋转（45度）；/*Firefox*/
-webkit转换：翻译（50px，100px）；/*Safari和Chrome*/
-webkit变换：旋转（45度）；/*Safari和Chrome*/
-o变换：旋转（45度）；/*Opera*/
}
这是一个DIV元素。
这是一个DIV元素+转换

---

在Chrome上测试，只有旋转会受到影响，即使它位于第一个位置（旋转之前），平移也不会产生任何效果。

属性是唯一的，不像对函数的顺序调用那样工作，它们只是覆盖了前面的定义。 因此，您需要一次性完成转换，如下所示（在Firefox 17中测试）：

其形式语法为：

根据您的代码，这里有一个

进一步阅读

• 关于Mozilla开发者网络

transform:rotate(45deg) translate(50px,100px);

transform: <transform-function> [<transform-function>]* | none