2

我试图翻转图像，然后使用 css 旋转它。

这是页面

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title> Mounts </title>
        <style type="text/css">
            img {
                -webkit-transform: rotate(180deg);
                -webkit-transform: scaleX(-1);
            }
        </style>
    </head>
    <body>
        <img src='1.jpg'>
    </body>
</html>

但是其中一个转换功能被 chrome 禁用了。

使用多个变换函数是否违法？

4

3 回答 3

3

您可以将它们组合在一个语句中：

transform: rotate(180deg) scaleX(-1);

或者您可以使用矩阵属性：http ://www.w3schools.com/css3/css3_2dtransforms.asp

甚至还有代码生成器，例如：http ://www.css3maker.com/css3-transform.html

于 2013-08-13T22:48:55.450 回答
1

Lea Verou 的旋转标志也有问题。如果不修改 webkit，它就无法工作。这就是我解决它的方法：

    <style>
    div {
  width: 9em;
  padding: .6em 1em;
  margin: 2em auto;
  background: yellowgreen;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: paused;
  animation: spin 1s linear infinite;
  animation-play-state: paused;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
    }
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
  }
}

    div:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
</style>


    <div ontouchstart="">Hover over me and watch me spin!</div>
于 2014-01-24T01:01:43.520 回答
1

我遇到了这个问题，我可以通过这种方式解决它：（我只是想旋转并拍打左img类的照片）（并享受；））

.left-img{
-webkit-transform:rotate(-90deg) scaleX(-1);
-moz-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);

}

于 2019-10-06T22:49:04.557 回答