我想对一个 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 上测试，只有旋转受到影响，平移即使位于第一个(旋转之前)也没有效果。
最佳答案
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 开发者网络上
关于html - 如何进行多次二维变换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14111947/