Question

我尝试翻转图像然后使用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禁用。

使用多个转换功能是否违法？

Answer 1

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

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

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

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

Answer 2

我遇到了这个问题，可以这样解决：（我只是想旋转和拍张带有left-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);

}

Answer 3

我也有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>

如何使用chrome中的css来翻转和旋转图像

3 个答案: