3

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 上测试，只有旋转受到影响，即使位于第一个位置（旋转之前），平移也没有影响。

4

2 回答 2

2

的形式语法为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);

这是jsFiddle 上的实时演示，基于您的代码。

进一步阅读

于 2013-01-01T16:21:20.577 回答
1

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

transform:rotate(45deg) translate(50px,100px);
于 2013-01-01T16:20:31.360 回答