Question

我想同时为div元素允许多次转换（旋转，翻译等）。

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

<!DOCTYPE html>
<html>
    <head>
    <style> 
        div {
            width:100px;
            height:75px;
            background-color:#FFCC00;
            border:1px solid black;
        }

        div#div2 {
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); /* IE 9 */
            -moz-transform:rotate(45deg); /* Firefox */      
            -webkit-transform:translate(50px,100px); /* Safari and Chrome */
            -webkit-transform:rotate(45deg); /* Safari and Chrome */
            -o-transform:rotate(45deg); /* Opera */
        }

    </style>
    </head>
<body>
    <div>This is a DIV element.</div>
    <div id="div2">This is a DIV element + Transformation</div>
</body>
</html>

在Chrome上测试时，只有旋转受到影响，即使位于旋转之前（即旋转之前），平移也无效。

Answer 1

transform的正式语法是：

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

为了执行多个转换，您必须连接转换函数：

-webkit-transform: translate(50px,100px) rotate(45deg);
-moz-transform: translate(50px,100px) rotate(45deg);
-ms-transform: translate(50px,100px) rotate(45deg);
-o-transform: translate(50px,100px) rotate(45deg);
transform: translate(50px,100px) rotate(45deg);

根据您的代码，这是 live demo on jsFiddle 。

进一步阅读

Using CSS Transforms在Mozilla开发者网络上

Answer 2

属性是唯一的，不像顺序调用函数那样工作，它们只是覆盖前面的定义。所以你需要一次性完成转换，就像这样（在Firefox 17中测试）：

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

如何进行多次2D变换？

2 个答案:

进一步阅读